中文 | English

popular-message

A lightweight feedback message appearing at the top of the screen, fading automatically. Has many different options for different situations.

Demo

Features

1. API design for iview-$mesage。
2. No dependence，lightweight，200 lines of source code，Smaller after compression。
3. UI Beautiful，Reference iview UI styles。

Install

1. use unpkg cdn link

<script src="https://unpkg.com/popular-message/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/popular-message/index.css">

2.use npm or yarn install

$ npm install popular-message
$ yarn add popular-message

Use

use script，get global variable $message。

use npm install，need import The module

import $message from 'popular-message';
import 'popular-message/index.css';

use in page

<!-- global configuration -->
$message.config({ top:85, duration: 4})

<!-- types -->
$message.info('this is a info message')
$message.success('this is a success message')
$message.warning('this is a info warning message')
$message.error('this is a info error message')
$message.loading('loading...')

<!-- onClose -->
$message.info({
    content:'this is message can close',
    onClose:() => console.log('close'),
    closable: true,
    duration: 6
})

<!-- destroy -->
$message.destroy()

API

Message instance

This component can be used with the following static methods:

• $message.info(config)
• $message.success(config)
• $message.warning(config)
• $message.error(config)
• $message.loading(config)

Parameter config can be string or object. When string, the content will be directly displayed, when object, the detail usage is explained below:

Property	Description	Type	Default
content	Prompt's message content	String	-
duration	Time before prompt dismisses, in seconds. Use 0 to not dismiss	Number	2
onClose	Function to be called after the prompt is closed	Function	-
closable	Whether to show a close button.	Boolean	false
dangerUseHtml	whether message is treated as HTML string	Boolean	false

Methods for global configuration and disposal are also provided:

• $message.config(options)
• $message.destroy()

$Message.config({
    top: 50,
    duration: 3
});

Property	Description	Type	Default
top	Prompt's distance from top, in pixels.	Number	24
duration	Default time before prompt dismisses, in seconds.	Number	1.5
singleton	Singleton Pattern	Boolean	false

License

Licensed under the MIT License.