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

news2024/12/28 11:49:46

当你的标题内容需要一些除了文字以外的功能,比如复制按钮,那么就需要用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);
    },

页面显示如下:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/958855.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

亚马逊、速卖通如何批量养号?自养号测评对卖家有哪些好处?

测评养号就是自己用真实环境养出来的买家账号。通过国外的邮箱、手机号码和注册当地真实收货地址&#xff0c;包括当地的国外住宅专线IP、国外真实虚拟信用卡等等&#xff0c;不过很多卖家也没有完全认清自养号的好处。那么测评自养号对卖家有哪些好处&#xff1f; 1、不用担心…

【C++】set和map

set和map 1. 预备知识2. set2.1 set的概念2.2 set的常见接口 3. multiset4. map4.1 map的概念4.2 map的常见接口 5. multimap6. 练习 1. 预备知识 set和map是关联式容器&#xff0c;里面存储的不是元素本身&#xff0c;存储的是<key,value>结构的键值对&#xff0c;比ve…

Python入门教程 | Python3 字符串

字符串是 Python 中最常用的数据类型。我们可以使用引号( ’ 或 " )来创建字符串。 创建字符串很简单&#xff0c;只要为变量分配一个值即可。例如&#xff1a; var1 Hello World! var2 "Tarzan"Python 访问字符串中的值 Python 不支持单字符类型&#xff…

J. Med. Chem 2022|TocoDecoy+: 针对机器学习打分函数训练和测试的无隐藏偏差的数据集构建新方法

原文标题&#xff1a;TocoDecoy: A New Approach to Design Unbiased Datasets for Training and Benchmarking Machine-Learning Scoring Functions 论文链接&#xff1a;https://pubs.acs.org/doi/10.1021/acs.jmedchem.2c00460 论文代码&#xff1a;GitHub - 5AGE-zhang/T…

苹果手机安装Loanmate步骤

1.电脑端下载爱思助手桌面软件并安装 https://www.i4.cn/ 2.苹果手机连接电脑&#xff0c;出现以下成功连接界面 3.切换到应用游戏选项 4.把Loanmate.ipa 包拖到3 界面 5.等待手机安装成功

智能电话机器人的出现,能够解决哪些问题?

经济的繁荣与高速的发展&#xff0c;使得电销这个方式快速地融合在房地产与金融投资等大部分行业上。在电销人员与客户的沟通上&#xff0c;难免会出现很多问题&#xff0c;毕竟所面对的客户都是各行各业&#xff0c;他们有着不同的经历和身份。 对于时常需要处理客户投诉、安…

linux上vscode中.cpp文件中引入头文件.hpp时报错:找不到头文件(启用错误钵形曲线)

当在.cpp文件中引入系统给定的头文件时&#xff1a;#include < iostream > 或者引入自定义的头文件 &#xff1a;#include <success.hpp> 报错&#xff1a;找不到相应的头文件&#xff0c;即在引入头文件的改行底下标出红波浪线 解决方法为&#xff1a; &#…

【前端】CSS-flexbox弹性盒模型布局

目录 一、前言二、flexbox简介三、属性1、容器属性2、容器成员属性 四、容器属性的作用1、flex-direction①、定义②、语句1&#xff09;、属性值 ③、代码示例1&#xff09;、flex-direction: row2&#xff09;、flex-direction: row-reverse3&#xff09;、flex-direction: c…

篇篇10万赞,3D原创动漫视频教程

本期是赤辰第25期AI项目教程&#xff0c;底部准备了8月粉丝福利&#xff0c;可以免费领取。 赤辰AI实操记&#xff0c;专注于AI改造项目与生产方法分享&#xff1a;AI高效变现案例拆解、AI生产力工具使用技巧、改善工作流、AI自动化运营技术等干货分享 今天给大家拆解一个近期…

探讨DPU驱动的高效AI大模型算力底座 中科驭数亮相中国IDC产业(长三角)年度大典

8月31日&#xff0c;以“AI造物 算引变革”为主题的第十八届中国IDC产业&#xff08;长三角&#xff09;年度大典今日在上海隆重召开。大会由中国IDC产业年度大典组委会、上海市通信学会“算力浦江”专委会、中国通信工业协会数据中心委员会联合主办。中科驭数产品运营部副总经…

go学习part21 Redis

300_尚硅谷_Redis的基本介绍和原理示意_哔哩哔哩_bilibili Redis 命令 | 菜鸟教程 (runoob.com) 1.基本介绍 2.基本操作 Redis的基本使用: 说明:Redis安装好后&#xff0c;默认有16个数据库&#xff0c;初始默认使用0号库,编号是0...15 1.添加key-val [set] 2.查看当前redi…

打造全球研发中心城市,湖南湘江新区的挑战与机遇

作者 | 魏启扬 来源 | 洞见新研社 图源&#xff1a;长沙晚报 十年前&#xff0c;中国高铁还在为是选择德国技术&#xff0c;还是日本方案左右为难&#xff0c;如今全面自主化的“复兴号”已有超千组车组投入运营&#xff0c;我们随时可以来一场说走就走的旅行。 十年前&…

【原创】H3C交换机链路聚合配置

图示 中间两个交换机&#xff0c;使用两根网线直连&#xff0c;这样本来是10G级联&#xff0c;变成了20G级联。 在默认情况下&#xff0c;这两根线在STP协议下&#xff0c;只有一路是通的&#xff0c;另一路处于备用状态。如果要将这两路都设置为级联&#xff0c;那么还需要…

MySQL高阶语句之常用查询

目录 常用查询 按关键字排序 区间判断及查询不重复记录 对结果进行分组 限制结果条目 设置别名 通配符 子查询 常用查询 &#xff08;增、删、改、查&#xff09; 对 MySQL 数据库的查询&#xff0c;除了基本的查询外&#xff0c;有时候需要对查询的结果集进行处理。 …

JasperReport定义变量后打印PDF变量为null以及整个pdf文件为空白

问题1: JasperReport打印出来的整个pdf文件为空白文件&#xff1b; 问题2&#xff1a;JasperReport定义变量后打印PDF变量为null&#xff1b; 问题1原因是因为缺少数据源JRDataSource JasperFillManager.fillReport(jasperReport, params,new JREmptyDataSource());如果你打印…

虹科案例 | 缆索挖掘机维护—小传感器,大作用!

一、 应用背景 缆索挖掘机 缆索挖掘机的特点是具有坚固的部件&#xff0c;如上部结构、回转环和底盘。底盘是用于移动挖掘机的下部机械部件&#xff0c;根据尺寸和型号的不同&#xff0c;由轮子或履带引导&#xff0c;并承载可转动的上部车厢。回转环连接上部和下部机器部件&am…

LTE ATTACH流程、PDN流程、PGW地址分配介绍

1、S-GW\P-GW选择 MME根据S-GW和P-GW的拓扑信息进行S-GW/P-GW的选择&#xff0c;在S-GW的候选序列和P-GW的候选序列中比较&#xff0c;寻找是否有合一的S-GW/P-GW&#xff0c;并且根据S-GW的优先级和权重信息进行排序&#xff0c;得到S-GW/P-GW的候选组。 2、SGW>PGW连接 PD…

简单了解网络传输介质

目录 一、同轴电缆 二、双绞线 三、光纤 四、串口电缆 一、同轴电缆 10BASE前面的数字表示传输带宽为10M&#xff0c;由于带宽较低、现在已不再使用。 50Ω同轴电缆主要用来传送基带数字信号&#xff0c;因此也被称作为基带同轴电缆&#xff0c;在局域网中得到了广泛的应用…

在VScode中如何将界面语言设置为中文

VSCode安装后的默认界面是只有英文的&#xff0c;如果想用中文界面&#xff0c;那么就需要安装对应的插件&#xff0c;vscode插件可以从扩展中心去搜索并安装。 安装vscode后打开vscode&#xff0c;点击左侧的扩展按钮。 在搜索框中输入chinese&#xff0c;弹出chinese&#x…

卫星通话发展

终端演进 华为Mate 50可以通过北斗卫星给个人定向发送文字、位置、轨迹图等信息&#xff0c;但内容会被审核&#xff0c;只有跟救援相关的信息才能被发送&#xff0c;而且收不到回复。 华为P60系列上&#xff0c;卫星通信功能被升级为双向&#xff0c;即支持发送和接收短信。…