# 基于layui的notice通知控件
#### 項(xiàng)目介紹
##### 更新日志
- 2019-03-26
- 重構(gòu)V2版本,如需使用V1版請(qǐng)查看v1分支
- 新增多種位置選擇
- 優(yōu)化同時(shí)顯示多條通知
- **css代碼初始化js載入,不獨(dú)立文件css文件。**
##### 更新日志
- 2018年9月18日
- **感謝layui社區(qū)成員@
Thans修改了本插件** - 優(yōu)化顯示位置,改到右側(cè)。(@
Thans) - 可以同時(shí)顯示多條通知(@
Thans) - css代碼初始化載入,不獨(dú)立文件。(@
Thans) - 在Thans修改版本上增加桌面提醒
基于layui的notice通知控件,算是對(duì)layer的一個(gè)小擴(kuò)展
列示:
#### 使用說明
1. 配置layui擴(kuò)展
```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",//顯示的時(shí)間
hideDuration:"1000",//消失的時(shí)間
timeOut:"2000",//停留的時(shí)間
extendedTimeOut:"1000",//控制時(shí)間
showEasing:"swing",//顯示時(shí)的動(dòng)畫緩沖方式
hideEasing:"linear",//消失時(shí)的動(dòng)畫緩沖方式
iconClass: 'toast-info', // 自定義圖標(biāo),有內(nèi)置,如不需要?jiǎng)t傳空 支持layui內(nèi)置圖標(biāo)/自定義iconfont類名
onclick: null, // 點(diǎn)擊關(guān)閉回調(diào)
};
notice.warning("成功");
notice.info("提示信息:毛都沒有...");
notice.error("大佬,我咋知道怎么肥四!");
notice.success("大佬,我咋知道怎么肥四!");
// 手動(dòng)移除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. 其他配置項(xiàng)看源碼吧,不是很難理解的
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 本項(xiàng)目
2. 新建 Feat_xxx 分支
3. 提交代碼
4. 新建 Pull Request