element notification消息自动换行和自定义样式

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',//自定义类名，可修改样式
            });
          });
}
}