# 消息通知
# 消息组件
系统框架中已经集成了大量开箱即用的系统组件,鉴于项目的额外的需要,我们特地独立封装和研发了消息通知组件
,我们最常见的如登录系统后自动弹出消息通知,提示今日的待办事宜等等,下面我们着重介绍下通知组件,鉴于不同的需要,我们开发了多种模式的消息通知:
在系统框架的入口JS文件中我们已经默认引入了通知组件的独立组件JS,所以此处我们只需要直接调用即可,如果需要单独引入该文件,如下操作:
layui.use(['notice'], function () {
var notice = layui.notice;
// 以下便可调用各种默认的通知组件
});
1
2
3
4
5
6
2
3
4
5
6
- 成功通知
notice.success({
title: '消息通知',
message: '你有新的消息,请注意查收!'
});
1
2
3
4
2
3
4
效果如下:
- 错误通知
notice.error({
title: '消息通知',
message: '你有新的消息,请注意查收!'
});
1
2
3
4
2
3
4
效果如下:
- 警告通知
notice.warning({
title: '消息通知',
message: '你有新的消息,请注意查收!'
});
1
2
3
4
2
3
4
效果如下:
- 信息通知
notice.info({
title: '消息通知',
message: '你有新的消息,请注意查收!'
});
1
2
3
4
2
3
4
效果如下:
- 成功提示
notice.msg('This is a message of success', {icon: 1});
1
效果如下:
- 错误提示
notice.msg('This is a message of error', {icon: 2});
1
效果如下:
- 警告提示
notice.msg('This is message of warning', {icon: 3});
1
效果如下:
- 信息提示
notice.msg('This is message of info', {icon: 5});
1
效果如下:
- 加载提示
notice.msg('Action in progress..', {icon: 4, close: true});
1
效果如下:
- 普通通知
notice.show({
title: '消息通知',
message: '你有新的消息,请注意查收!'
});
1
2
3
4
2
3
4
效果如下:
- 带图片通知
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
2
3
4
5
6
7
8
效果如下:
- 带按钮消息通知
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
2
3
4
5
6
7
8
9
10
11
12
13
14
效果如下: