中文 | English
popular-message
A lightweight feedback message appearing at the top of the screen, fading automatically. Has many different options for different situations.
Features
- API design for iview-$mesage。
- No dependence,lightweight,200 lines of source code,Smaller after compression。
- UI Beautiful,Reference iview UI styles。
Install
- 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('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 |
---|---|---|---|
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.