layui 第三方組件平臺(tái)

返回首頁(yè) 發(fā)布組件

1. 此控件是基于 layui 的 notice 通知控件,可用于美化消息通知;2. 控件支持響應(yīng)式。算是對(duì) layer 的一個(gè)小擴(kuò)展,剛好公司項(xiàng)目用到,自己就造了個(gè)輪子

更新:2019-3-26 創(chuàng)建:2018-8-31

文檔

# 基于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ò)展

列示:


#### 使用說(shuō)明

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("提示信息:毛都沒(méi)有...");
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



下載

立即下載 去碼云下載 去 GitHub 下載
該擴(kuò)展組件由第三方用戶主動(dòng)投遞,并由其自身進(jìn)行維護(hù),本站僅做收集。