在ElementUI的$notify通知方法中渲染自定义组件

官方示例：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/notification 发现使用html的方式不便于逻辑处理，如下：

 

 因此，推荐采用传递组件的方式

效果图： 

 notifyDownloadOfflineHosts.vue:

<!--notifyDownloadOfflineHosts-->
<template>
  <div style="width: 100%">
    <el-row :gutter="10">
      <el-col
        :span="6"
        v-for="(item, index) in downloadOfflineHosts"
        :key="index"
      >
        <div style="margin-bottom: 5px">
          {{ item }}
        </div>
      </el-col>
    </el-row>
    <p style="margin-top: 10px">
      共
      <strong>
        {{ downloadOfflineHosts.length }}
      </strong>
      台主机下载已离线
    </p>
  </div>
</template>

<script>
export default {
  name: "notifyDownloadOfflineHosts",
  components: {},
  props: {
    //如果是数组，默认值必须是一个函数来返回
    downloadOfflineHosts: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
};
</script>

        this.$notify.info({
          title: "提示",
          dangerouslyUseHTMLString: true,
          message: this.$createElement("notifyDownloadOfflineHosts", {
            // 使用自定义组件
            props: {
              downloadOfflineHosts,
            },
          }),
          duration: 0, //不会自动关闭
        });