消息通知

消息组件

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

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

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

});

• 成功通知

notice.success({
    title: '消息通知',
    message: '你有新的消息，请注意查收!'
});

效果如下：

• 错误通知

notice.error({
    title: '消息通知',
    message: '你有新的消息，请注意查收!'
});

效果如下：

• 警告通知

notice.warning({
    title: '消息通知',
    message: '你有新的消息，请注意查收!'
});

效果如下：

• 信息通知

notice.info({
    title: '消息通知',
    message: '你有新的消息，请注意查收!'
});

效果如下：

• 成功提示

notice.msg('This is a message of success', {icon: 1});

效果如下：

• 错误提示

notice.msg('This is a message of error', {icon: 2});

效果如下：

• 警告提示

notice.msg('This is message of warning', {icon: 3});

效果如下：

• 信息提示

notice.msg('This is message of info', {icon: 5});

效果如下：

• 加载提示

notice.msg('Action in progress..', {icon: 4, close: true});

效果如下：

• 普通通知

notice.show({
    title: '消息通知',
    message: '你有新的消息，请注意查收!'
});

效果如下：

• 带图片通知

notice.show({
    /*image: '../../assets/images/logo.png',*/
    image: 'https://pic.qqtn.com/up/2018-9/15367146917869444.jpg',
    imageWidth: 71,
    title: '消息通知',
    maxWidth: '300px',
    message: '你有新的消息，请注意查收!'
});

效果如下：

• 带按钮消息通知

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});
    }]]
});

效果如下：