版本:1.0.11
支持浏览器:IE11以上,Edge,Chrome,360浏览器
说明:当前版本为初版,未来有空的话可能会整合websocket。
1、组件界面
初版界面较为简洁,倾向于实用,后续会慢慢完善。
                        
 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": "预警", "other": "其他"},
                    "width": "300px",
                    "height": "720px",
                    "contentWidth": "80%",
                    "contentHeight": "65%"
                }
            });
        });
    });参数说明
1. elem 元素选择器,如“#test”
2. positionX 消息提醒图标水平位置,"left"屏幕左侧,"right"屏幕右侧,默认在屏幕右侧
3. positionY 消息提醒图标垂直位置,常用长度单位,如:像素"100px"
4. lowKey 初始化时5. noticeWindow 消息窗口列表属性 Object类型,参数如下:
   5.1 type 消息窗口列表类型 1:使用组件自带消息窗口,2:打开用户自定义窗口,默认是1
   5.2 title 消息窗口名称,不填时使用默认名称
   5.3 classType 消息类型 当type=1时有效,Object类型,格式{"id": "name", "id": "name"},如:{"notice": "通知", "alerted": "预警", "other": "其他"}
   5.4 url 自定义消息窗口链接,type=2时生效
   5.5 width 消息窗口宽度,常用长度单位,如:像素"100px"
   5.6 height 消息窗口高度,常用长度单位,如:像素"100px"
   5.7 contentWidth 使用组件自带消息窗口,type=1时,查看消息详细内容时打开的窗口的宽度
   5.8 contentHeight 使用组件自带消息窗口, type=1时,查看消息详细内容时打开的窗口的宽度
4、手动点亮消息提醒图标
未点亮是的图标,一片灰蒙蒙:
                        
 
点亮后的图标:
 
notice.remind({
       "lowKey": false
});参数说明
1. lowKey 隐藏或者显示图标,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"}
                ]
            });参数说明
1. lowKey 隐藏或显示提醒图标。 true隐藏,false显示
2. classTypeId 消息类型id,初始化时在classType中定义
3. content 推送的消息内容集合,数组类型,格式如下:[{"title":"", "content":"", "date":"", "url":""}],参数如下:
   3.1 title 消息标题
   3.2 content 消息详细内容,内容过多请截取,这里是提醒窗口,不是详细消息浏览窗口,目前限制最多43个字符串
   3.3 date 发布日期
   3.4 url 点击消息跳转查看详细消息的连接