# 消息通知

# 消息组件

系统框架中已经集成了大量开箱即用的系统组件,鉴于项目的额外的需要,我们特地独立封装和研发了消息通知组件,我们最常见的如登录系统后自动弹出消息通知,提示今日的待办事宜等等,下面我们着重介绍下通知组件,鉴于不同的需要,我们开发了多种模式的消息通知:

在系统框架的入口JS文件中我们已经默认引入了通知组件的独立组件JS,所以此处我们只需要直接调用即可,如果需要单独引入该文件,如下操作:

layui.use(['notice'], function () {
    var notice = layui.notice;
    
    // 以下便可调用各种默认的通知组件

});
1
2
3
4
5
6
  • 成功通知
notice.success({
    title: '消息通知',
    message: '你有新的消息,请注意查收!'
});
1
2
3
4

效果如下:

mixureSecure

  • 错误通知
notice.error({
    title: '消息通知',
    message: '你有新的消息,请注意查收!'
});
1
2
3
4

效果如下:

mixureSecure

  • 警告通知
notice.warning({
    title: '消息通知',
    message: '你有新的消息,请注意查收!'
});
1
2
3
4

效果如下:

mixureSecure

  • 信息通知
notice.info({
    title: '消息通知',
    message: '你有新的消息,请注意查收!'
});
1
2
3
4

效果如下:

mixureSecure

  • 成功提示
notice.msg('This is a message of success', {icon: 1});
1

效果如下:

mixureSecure

  • 错误提示
notice.msg('This is a message of error', {icon: 2});
1

效果如下:

mixureSecure

  • 警告提示
notice.msg('This is message of warning', {icon: 3});
1

效果如下:

mixureSecure

  • 信息提示
notice.msg('This is message of info', {icon: 5});
1

效果如下:

mixureSecure

  • 加载提示
notice.msg('Action in progress..', {icon: 4, close: true});
1

效果如下:

mixureSecure

  • 普通通知
notice.show({
    title: '消息通知',
    message: '你有新的消息,请注意查收!'
});
1
2
3
4

效果如下:

mixureSecure

  • 带图片通知
notice.show({
    /*image: '../../assets/images/logo.png',*/
    image: 'https://pic.qqtn.com/up/2018-9/15367146917869444.jpg',
    imageWidth: 71,
    title: '消息通知',
    maxWidth: '300px',
    message: '你有新的消息,请注意查收!'
});
1
2
3
4
5
6
7
8

效果如下:

mixureSecure

  • 带按钮消息通知
notice.info({
    title: '消息通知',
    message: '你有新的消息,请注意查收!',
    timeout: false,
    pauseOnHover: false,
    resetOnHover: false,
    progressBar: false,
    maxWidth: '300px',
    buttons: [['<button>Btn1</button>', function () {
        notice.msg('点击了按钮一', {icon: 5});
    }], ['<button>Btn2</button>', function () {
        notice.msg('点击了按钮二', {icon: 5});
    }]]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果如下:

mixureSecure