[element-ui] $notify使用自定义组件

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

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

...


 methods: {
    transData () {
      this.$emit('receiveData', this.item, this.operate)
    }
  },

引用

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

this.$notify({
  // title:'通知',
  dangerouslyUseHTMLString: true,
  message: this.$createElement('failOrderTip', {       // 使用自定义组件
    ref: 'failOrderTip',
    props: {
      data: this.data,// 传参
    },
    on: {// 函数
      receiveData: (item, operate) => {
        console.log(item, operate)
      }
    }
  }),
  duration: 0
})

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

this.$notify.closeAll()

关闭某个

const instance = this.$notify({
... ...
instance.close()

参考：

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

element-ui this.$notify使用html作为内容 包括事件 禁止面板重叠 关闭面板

render函数动态创建dom，并和创建的子组件进行传值交互