Dialog 的标题title属性用slot实现。（复制功能）

最新推荐文章于 2024-05-30 22:35:32 发布

三月.'

最新推荐文章于 2024-05-30 22:35:32 发布

阅读量540

点赞数 1

分类专栏：功能实现 element-ui 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_56715703/article/details/132618985

版权

功能实现同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

element-ui

6 篇文章 2 订阅

订阅专栏

当你的标题内容需要一些除了文字以外的功能，比如复制按钮，那么就需要用slot传入。

文档中是这么写的：

举例：

<span slot="title" class="whitelist-title">
    <span> {{ whitelistId }} </span>
    <span style="cursor:pointer" @click="copyActivityLink(whitelistId)"> <i class="el-icon-document-copy"></i></span>
</span>

whitelistId是个变量，点击事件传入此值，调用以下方法即可复制。

    // 复制
    async copyActivityLink(id) {
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.setAttribute("value", id);
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        this.$message.success("复制成功");
      } else {
        this.$message.error("复制失败");
      }
      document.body.removeChild(input);
    },

页面显示如下：