# 基于layui的notice通知控件
#### 項目介紹
##### 更新日志
- 2019-03-26
- 重構(gòu)V2版本,如需使用V1版請查看v1分支
- 新增多種位置選擇
- 優(yōu)化同時顯示多條通知
- **css代碼初始化js載入,不獨立文件css文件。**
##### 更新日志
- 2018年9月18日
- **感謝layui社區(qū)成員@
Thans修改了本插件** - 優(yōu)化顯示位置,改到右側(cè)。(@
Thans) - 可以同時顯示多條通知(@
Thans) - css代碼初始化載入,不獨立文件。(@
Thans) - 在Thans修改版本上增加桌面提醒
基于layui的notice通知控件,算是對layer的一個小擴展
列示:
#### 使用說明
1. 配置layui擴展
```javascript
layui.config({
base: './../dist/'
});
```
3. 調(diào)用API
```javascript
layui.use(['notice'], function () {
var notice = layui.notice; // 允許別名 toastr
// 初始化配置,同一樣式只需要配置一次,非必須初始化,有默認(rèn)配置
notice.options = {
closeButton:true,//顯示關(guān)閉按鈕
debug:false,//啟用debug
positionClass:"toast-top-right",//彈出的位置,
showDuration:"300",//顯示的時間
hideDuration:"1000",//消失的時間
timeOut:"2000",//停留的時間
extendedTimeOut:"1000",//控制時間
showEasing:"swing",//顯示時的動畫緩沖方式
hideEasing:"linear",//消失時的動畫緩沖方式
iconClass: 'toast-info', // 自定義圖標(biāo),有內(nèi)置,如不需要則傳空 支持layui內(nèi)置圖標(biāo)/自定義iconfont類名
onclick: null, // 點擊關(guān)閉回調(diào)
};
notice.warning("成功");
notice.info("提示信息:毛都沒有...");
notice.error("大佬,我咋知道怎么肥四!");
notice.success("大佬,我咋知道怎么肥四!");
// 手動移除notice 或者使用 removeToast
notice.hideToast()
});
```
4. positionClass屬性可選值:
- toast-top-center
- toast-bottom-center
- toast-top-full-width
- toast-bottom-full-width
- toast-top-left
- toast-top-right
- toast-bottom-right
- toast-bottom-left
5. 其他配置項看源碼吧,不是很難理解的
5. 支持方法
```javascript
layui.use(['notice'], function () {
// 警告提示
notice.warning("提示內(nèi)容");
// 正常提示
notice.info("提示內(nèi)容");
// 異常提示
notice.error("提示內(nèi)容");
//
notice.success("提示內(nèi)容");
});
```
#### 參與貢獻(xiàn)
1. Fork 本項目
2. 新建 Feat_xxx 分支
3. 提交代碼
4. 新建 Pull Request