ant design vue 的 Notification 用法
notification 是用来 全局展示通知提醒信息,项目中经常用到,目前在项目中有三种用法,
- 包括 正常文字显示,
- 部分文字添加样式,
- 后台返回html数据显示在notification中
实例代码如下
1.正常文字信息
openNotification() {
this.$notification.success({
message: '消息',
description:
'消息提示',
});
},
2.文字添加样式
this.$notification.success({
message: '消息',
description:
(<span>消息 <span style="color:red">文字样式</span></span>)
});
3.后台返回带样式的html
后台返回格式
@GetMapping ("getnotice")
public Result getnotice() {
ArrayList<String> strings = new ArrayList<>();
for (int i = 0; i < 4; i++) {
strings.add("<span>消息提示<<span style=\"color:red\">第" + i + "</span>>个通知信息!</br>课题</span>");
}
return new Result().success().setData(strings);
}
前端代码
notices(){
const h = this.$createElement;
getnotice().then(res=>{
console.log('res'+res)
res.forEach((item) => {
this.$notification.warn({
title: '信息提示',
message:
h("div", null, [
h("p", { domProps: { innerHTML: item } }, null),
])
,
})
})
})
},
三种方法就是这样。
Notification类型和其他
类型:
其他
可以看一下api,Notification 的message属性 要求的类型是String,vueNode,function
所以其他组件的属性也是这集中类型,上边的三种方法也是可以的,比如 Message 全局提示
写法和Notification 类似
notices(){
const h = this.$createElement;
getnotice().then(res=>{
console.log('res'+res)
res.forEach((item) => {
this.$message.warn({
content:
h("div", null, [
h("p", { domProps: { innerHTML: item } }, null),
])
,
})
})
})
},
以上就是 ant design vue 消息提示组件用法问题