popular-message Star

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

Doc： 中文 | English

Install

$ yarn add popular-message

Use

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

Example

info success warning error loading

$message.info('这是一条普通的提示')
$message.success('这是一条成功的提示')
$message.warning('这是一条警告的提示')
$message.error('这是一条格式错误的提示')
$message.loading('正在加载中...')

object

$message.info({
    content: '我是字符串消息'
})

close 手动close

$message.info('这是一条带关闭按钮的消息',{
    onClose:() => console.log('关闭'),
    closable: true,
    duration: 2
})

$message.info('这是一条手动关闭按钮的消息',{
    onClose:() => console.log('关闭'),
    closable: true,
    duration: 0
})

config

$message.config({
    top:85,
    duration: 4
})

destroy

$message.destroy()

configSingleton singleton

$message.config({
    singleton:true
})
$message.info('这是一条单例的通知的消息')

defaultDnagerUseHtml dangerUseHtml

// default
$message.info(htmlStr,{ duration: 0, closable: true })
// dangerUseHtml 选项可能会导致XSS攻击
$message.info(htmlStr,{
    dangerUseHtml: true,
    duration: 0,
    closable: true
})