Wangren

---

点我一下，再看看右上角

感觉是不是很惊艳呢？很简单几行代码就能实现哦!

<script type="text/javascript">
    wui.use('notice', function () {
        var notice = wui.notice;
        notice.warning("这是一个警告：BALABALA");
    });
</script>

我们为您内置4种常用的通知场景，点击下面的按钮分别试试吧。

提示 警告 成功 失败

//提示
notice.info("我是一个提示！");

//警告
notice.warning("警告：下不为列！");

//成功
notice.success("成功了，看好你哦！");

//失败
notice.error("大佬，出错了！");

目前 notice 组件提供了以下基础参数，你可根据实际场景进行相应的设置

参数选项	说明	类型	默认值
Reverse	是否镜像显示	boolean	false
closeButton	显示关闭按钮	boolean	true
tapToDismiss	鼠标点击控件任意位置关闭	boolean	true
closeOnHover	鼠标划过控件后关闭	boolean	true
progressBar	显示控件距离消失时间倒计时进度条	boolean	false
timeOut	显示时间，单位：毫秒， 0为不自动关闭	number	3000
iconClass	自定义背景色，支持 wui 内置 css 类名，参考颜色，格式 { error: '', info: '', success: '', warning: '' }	Array	{ error: 'toast-error', info: 'toast-info', success: 'toast-success', warning: 'toast-warning' }
icon	自定义通知图标，支持 wui 内置图标，参考图标，格式 { error: '', info: '', success: '', warning: '' }	Array	{ error: 'wui-icon-grievance', info: 'wui-icon-notice', success: 'wui-icon-emoji', warning: 'wui-icon-tips' }
positionClass	通知控件显示位置，可选项： top-center：顶部中间 bottom-center：底部中间 top-full-width：顶部通栏 bottom-full-width：底部通栏 top-left：顶部左侧 top-right：项部右侧 bottom-right：底部右侧 bottom-left：底部左侧	string	top-right
showMethod	显示方式，可选项： fadeIn、slideDown、show	string	fadeIn
hideMethod	隐藏方式，可选项： fadeOut、slideUp、hide	string	fadeOut
showEasing	显示时的动画，可选项：swing、linear swing：动画速度由快到慢 linear：动画速度一样	string	swing
hideEasing	消失时的动画，可选项：swing、linear swing：动画速度由快到慢 linear：动画速度一样	string	swing
showDuration	显示动画的时间，单位：毫秒	number	300
hideDuration	消失动画的时间，单位：毫秒	number	1000
onclick	通知控件关闭时的回调	Function	-
escapeHtml	通知内容支持HTML语法，如加个超连接，设置为 true 则会将HTML代码转义后再显示	boolean	false

举个栗子

<script type="text/javascript">
    wui.use('notice', function () {
        var notice = wui.notice;

        //就在这里设置参数
        notice.options = {
            closeButton:false,
            ... ...
        };

        notice.warning("警告：BALABALA");
    });
</script>