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

最新推荐文章于 2025-06-04 10:32:19 发布

qq_44938769

最新推荐文章于 2025-06-04 10:32:19 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/qq_44938769/article/details/128181951

本文介绍如何在Vue项目中使用自定义组件的方式优化$notify全局通知功能，特别是针对需要展示复杂信息如多个订单号的情况。通过创建专门的组件，并结合$notify的高级用法实现更丰富的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

$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
        })