vue + element ui之$notify使用自定义组件

前言

$notify，显示全局的通知提醒消息

在平时的使用中，我们都是将需要全局通知提醒的消息放在

$notify

的

message

中，在这个里面可以放文字，也可以放

html

片段，具体的可以去看官网的介绍

在这里我主要是使用自定义组件

使用步骤

1.在components里面新建一个文件

以我的例子为例，我遇到的使用场景是需要通知用户有发货失败的订单，并显示这些发货失败的订单号，上代码：

<div class="failOrderTip"><div class="title"><i class="el-icon-message-solid"></i> 通知
        </div><div class="content"><span>订单号：</span><span v-for="(item, index) in failOrderData":key="index">{{ item }}&nbsp;</span><span>发货失败，请及时处理</span></div></div>

具体的以实际的为主！！！

2.在使用页面引入该组件

import failOrderTip from'./components/failOrderTip.vue'

3.$notify的使用

this.$notify({// title:'通知',dangerouslyUseHTMLString:true,// message: `<div style="cursor:pointer;"><span v-for="item in ${this.failOrderData}">{{item}}</span></div>`,message:this.$createElement('failOrderTip',{// 使用自定义组件ref:'failOrderTip',props:{failOrderData:this.failOrderData
              // progress: this.progress,// ...this.hiveData,}}),duration:0})

this.$createElement

的具体说明可以参考这篇文章：
https://www.jianshu.com/p/598c3c3f0b7c

4.$notify使用完成之后记得关闭

this.$notify.closeAll()

总结

以上是我在使用的过程中的一些问题总结，写博客记录下来是想让自己的印象更加深刻，如有不足之处请多见谅~~~