1、使用div标签进行自动换行
使用div标签可以完美实现,关键在于style两句css样式
this.$notify({
title: '当前用户信息',
message: this.$createElement('div', { style: ' word-wrap: break-word;word-break:break-all'}, '用户信息内容'),
type:"info",//主题样式
offset: 10,//偏移距离
duration: 0,//消息存在时间,0表示一直存在
customClass:'notifyStyle',//自定义类名
});
2、自定义修改notification通知框样式
上面代码中可以添加customClass自定义类名,然后在本vue页面添加style样式。
添加一个新的不加scope的style标签,在每一个样式后加上!important进行加权,然后即可自定义修改notification样式。如下:
<style>
.notifyStyle{
width: 500px !important;
}
</style>
3、防止notification消息通知重叠的办法
只需要在每一个this.$notify{}外部用
this.notificationPromise = this.notificationPromise.then(this.$nextTick).then(()=>{});包裹即可,例子如下:
data(){
return{
notificationPromise:Promise.resolve(),
}
}
methods:{
handeclick(){
this.notificationPromise = this.notificationPromise.then(this.$nextTick).then(()=>{
this.$notify({
title: '当前用户信息',
message: this.$createElement('div', {style: 'word-wrap:break-word;word-break:break-all;font-weight:bold;color:blue'}, '用户信息'),
type: "info",
offset: 0,//偏移距离
duration: 5000,//消息存在时间,0表示一直存在
customClass: 'notifyStyle',//自定义类名,可修改样式
});
});
}
}