企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
## 6.2.1.快速使用 :id=start ```javascript layui.use(['notice'], function(){ var notice = layui.notice; // 消息通知 notice.success({ title: '消息通知', message: '你有新的消息,请注意查收!' }); // 提示框,1成功、2失败、3警告、4加载、5信息(蓝色图标) notice.msg('Hello', {icon: 1}); }); ``` ![](https://s2.ax1x.com/2019/08/28/mHaYM4.png) ## 6.2.2.全部方法 :id=method 方法 | 参数 | 说明 :--- | :--- | :--- success(object) | 见下方 | 成功消息(绿色) warning(object) | 见下方 | 警告消息(黄色) error(object) | 见下方 | 错误消息(红色) info(object) | 见下方 | 通知消息(蓝色) show(object) | 见下方 | 自定义样式 | msg(string, object) | 文本,其他参数 | 提示框 | destroy() | 无 | 关闭全部 hide(object, toast, closedBy) | 见下方 | 关闭指定的通知 settings(object) | 见下方 | 统一设置默认值 **统一设置默认值:** ```javascript notice.settings({ timeout: 1500, transitionIn: 'flipInX', onOpened: function(){ console.log('notice opend!'); } }); ``` **关闭指定的通知:** ```javascript notice.hide({}, document.querySelector('.toast')); ``` - 参数一   重写一些参数,比如关闭动画等 - 参数二   根据自定义的className选择关闭的对象 ## 6.2.3.参数列表 :id=options 参数 | 说明 | 默认值 | 可选值 :---|:---|:---|:--- title | 标题 | 无 | string类型 message | 内容 | 无 | string类型 position | 显示位置 | topRight | 见下方 transitionIn | 进入动画 | fadeInLeft | 见下方 transitionOut | 退出动画 | fadeOutRight | 见下方 timeout | 消失时间 | 5000 | 单位毫秒,false永不消失 progressBar | 进度条 | true | true显示、false不显示 balloon | 气泡效果 | false | true开启、false关闭 close | 关闭按钮 | true | true显示,false不显示 pauseOnHover | 鼠标滑过暂停消失时间 | true | true、false resetOnHover | 鼠标滑过重置消失时间 | false | true、false animateInside | 文字动画效果 | false | true开启、false关闭 className | 自定义class | 无 | 多个用空格分隔 theme | 主题 | light | light、dark audio | 音效 | 无 | 1,2,3,4,5,6 | | | image | 显示图片 | 无 | 图片地址 imageWidth | 图片宽度 | 60 | 数字 buttons | 显示按钮 | [] | [ [ 'btn1', function(){} ], ['btn2', function(){} ] ] overlay | 遮罩层 | false | true显示,false不显示 drag | 滑动关闭 | true | true开启,false关闭 layout | 布局类型 | 2 | 1标题和内容并排,2两排显示 rtl | 布局方向 | false | false内容居左,true居右 displayMode | 显示模式 | 0 | 0无限制,1同类型存在不显示,2同类型存在先移除 targetFirst | 插入方式 | 自动 | true从上插入,false下插入 onOpened | 打开后回调函数 | 无 | function onClosed | 关闭后回调函数 | 无 | function | | | titleColor | 标题颜色 | 默认| 颜色单位 titleSize | 标题大小 | 默认| 尺寸单位 messageColor | 文字颜色 | 默认| 颜色单位 messageSize | 文字大小 | 默认| 尺寸单位 backgroundColor | 背景颜色 | 默认 | 颜色单位 progressBarColor | 进度条颜色 | 默认 | 颜色单位 maxWidth | 最大宽度 | 空| 尺寸单位 **参数position显示位置可选值:** 属性 | 说明 :---|:--- bottomRight | 右下角 bottomLeft | 左下角 topRight | 右上角 topLeft | 左上角 topCenter | 顶部中间 bottomCenter | 底部中间 center | 正中间 **参数transitionIn进入动画可选值:** 属性 | 说明 :---|:--- bounceInLeft | 向左反弹 bounceInRight | 向右反弹 bounceInUp | 向上反弹 bounceInDown | 向下反弹 fadeIn | 淡入 fadeInDown | 向下淡入 fadeInUp | 向上淡入 fadeInLeft | 向左淡入 fadeInRight | 向右淡入 flipInX | 翻转进入 **参数transitionOut退出动画可选值:** 属性 | 说明 :---|:--- fadeOut | 淡出 fadeOutUp | 向上淡出 fadeOutDown | 向下淡出 fadeOutLeft | 向左淡出 fadeOutRight | 向右淡出 flipOutX | 翻转退出