版本：1.0.11
支持瀏覽器：IE11以上，Edge，Chrome，360瀏覽器
說明：當(dāng)前版本為初版，未來有空的話可能會(huì)整合websocket。

1、組件界面
初版界面較為簡潔，傾向于實(shí)用，后續(xù)會(huì)慢慢完善。



2、用例
在組件源碼的test文件夾中。


3、初始化

layui.config({
        base: "../mods/"
    }).use("mods", function (mods) {
        //初始化消息組件
        mods(["layer", "jsanNotice"], function (layer) {
            const notice = layer.noticeMarker({
                "elem": "#noticeMarker",
                "positionX": "right",
                "positionY": "100px",
                "lowKey": true,
                "noticeWindow": {
                    "type": 1,
                    "title": "消息",
                    "classType": {"notice": "通知", "alerted": "預(yù)警", "other": "其他"},
                    "width": "300px",
                    "height": "720px",
                    "contentWidth": "80%",
                    "contentHeight": "65%"
                }
            });
        });
    });

參數(shù)說明

1. elem 元素選擇器，如“#test”
2. positionX 消息提醒圖標(biāo)水平位置，"left"屏幕左側(cè)，"right"屏幕右側(cè)，默認(rèn)在屏幕右側(cè)
3. positionY 消息提醒圖標(biāo)垂直位置，常用長度單位，如：像素"100px"
4. lowKey 初始化時(shí)
5. noticeWindow 消息窗口列表屬性 Object類型，參數(shù)如下：
   5.1 type 消息窗口列表類型 1：使用組件自帶消息窗口，2：打開用戶自定義窗口，默認(rèn)是1
   5.2 title 消息窗口名稱，不填時(shí)使用默認(rèn)名稱
   5.3 classType 消息類型 當(dāng)type=1時(shí)有效，Object類型，格式{"id": "name", "id": "name"}，如：{"notice": "通知", "alerted": "預(yù)警", "other": "其他"}
   5.4 url 自定義消息窗口鏈接，type=2時(shí)生效
   5.5 width 消息窗口寬度，常用長度單位，如：像素"100px"
   5.6 height 消息窗口高度，常用長度單位，如：像素"100px"
   5.7 contentWidth 使用組件自帶消息窗口，type=1時(shí)，查看消息詳細(xì)內(nèi)容時(shí)打開的窗口的寬度
   5.8 contentHeight 使用組件自帶消息窗口， type=1時(shí)，查看消息詳細(xì)內(nèi)容時(shí)打開的窗口的寬度
                        4、手動(dòng)點(diǎn)亮消息提醒圖標(biāo)
                        
未點(diǎn)亮是的圖標(biāo)，一片灰蒙蒙：
 
點(diǎn)亮后的圖標(biāo)：
 

                        
notice.remind({
       "lowKey": false
});
參數(shù)說明

                        
1. lowKey 隱藏或者顯示圖標(biāo)，true隱藏，false顯示
5、使用組件自帶消息窗口，推送新消息
 

                        
          notice.addNews({
                "lowKey": true,
                "classTypeId": "notice",
                "content": [{"title": "【通知】一條來自測試的消息消息消息消息消息消息消息消息消息", "content": "一條來自測試的消息，最多20字，最多20字，最多20字，最多20字，最多20字，最多20字", "date": "2019-07-28 19:30:36", "url": "https://www.baidu.com"},
                    {"title": "【通知】一條來自測試的消息消息消息消息消息消息消息消息消息", "content": "一條來自測試的消息，最多20字，最多20字，最多20字，最多20字，最多20字，最多20字", "date": "2019-07-28 19:30:36", "url": "https://www.baidu.com"},
                    {"title": "【通知】一條來自測試的消息消息消息消息消息消息消息消息消息", "content": "一條來自測試的消息，最多20字，最多20字，最多20字，最多20字，最多20字，最多20字", "date": "2019-07-28 19:30:36", "url": "https://www.baidu.com"},
                    {"title": "【通知】一條來自測試的消息消息消息消息消息消息消息消息消息", "content": "一條來自測試的消息，最多20字，最多20字，最多20字，最多20字，最多20字，最多20字", "date": "2019-07-28 19:30:36", "url": "https://www.baidu.com"}
                ]
            });
                        參數(shù)說明
                        

                        
1. lowKey 隱藏或顯示提醒圖標(biāo)。 true隱藏，false顯示
2. classTypeId 消息類型id，初始化時(shí)在classType中定義
3. content 推送的消息內(nèi)容集合，數(shù)組類型，格式如下：[{"title":"", "content":"", "date":"", "url":""}]，參數(shù)如下：
   3.1 title 消息標(biāo)題
   3.2 content 消息詳細(xì)內(nèi)容，內(nèi)容過多請截取，這里是提醒窗口，不是詳細(xì)消息瀏覽窗口，目前限制最多43個(gè)字符串
   3.3 date 發(fā)布日期
   3.4 url 點(diǎn)擊消息跳轉(zhuǎn)查看詳細(xì)消息的連接