中文 | English

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

Demo

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。

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 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()

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:

Methods for global configuration and disposal are also provided:

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

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

Licensed under the MIT License.