popular-message Star

轻量级的信息反馈组件,在顶部居中显示,并自动消失。
有多种不同的提示状态可选择。

Doc: 中文 | English

Install

$ yarn add popular-message

Use

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

Example

$message.info('这是一条普通的提示')
$message.success('这是一条成功的提示')
$message.warning('这是一条警告的提示')
$message.error('这是一条格式错误的提示')
$message.loading('正在加载中...')
$message.info('这是一条带关闭按钮的消息',{
    onClose:() => console.log('关闭'),
    closable: true,
    duration: 2
})

$message.info('这是一条手动关闭按钮的消息',{
    onClose:() => console.log('关闭'),
    closable: true,
    duration: 0
})
$message.config({
    top:85,
    duration: 4
})
$message.destroy()
$message.config({
    singleton:true
})
$message.info('这是一条单例的通知的消息')
// default
$message.info(htmlStr,{ duration: 0, closable: true })
// dangerUseHtml 选项可能会导致XSS攻击
$message.info(htmlStr,{
    dangerUseHtml: true,
    duration: 0,
    closable: true
})