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()

总结

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