vue自定义指令--一键复制

devtools/2024/11/19 9:09:18/

vue项目中想要实现点击按钮一键复制,可以通过vue的自定义指令directive来实现

一、新建directive.js文件

新建directive.js文件,用于定义所有的自定义指令。

javascript">import {  Toast } from 'vant';const directive = {// 一键复制copy:{bind (el, { value }) {el.$value = value;el.handler = async () => {if (!el.$value) {Toast.fail('没有要复制的内容');return;}try {// 直接使用 Clipboard API 复制await navigator.clipboard.writeText(el.$value);Toast.success('复制成功');} catch (err) {Toast.fail('复制失败', err);}};// 监听点击事件el.addEventListener('click', el.handler);},componentUpdated (el, { value }) {el.$value = value;},unbind (el) {el.removeEventListener('click', el.handler);}}
}export default directive;

二、main.js文件引入

javascript">import directive from "./utils/directive";Vue.directive('copy', directive.copy);

三、使用

在标签中通过使用v-copy=“需要复制的内容”指令,点击按钮后实现一键复制

<button class="copy-button" v-copy="shareInfo.URL" @click="()=>{ screen2 = false }"
>复制链接</button>

 

参考链接:vue使用自定义指令实现一键复制_vue 复制-CSDN博客


http://www.ppmy.cn/devtools/135169.html

相关文章

日志采样标记算法

从日志中提取特征值: {0: (LDAP Built with OpenLDAP LDAP SDK, :), 1: (LDAP SSL support unavailable, :), 2: (suEXEC mechanism enabled lili wrapper /usr/sbin/suexec, ()/:), 3: (Digest generating secret for digest authentication ..., .:), 4: (Digest done…

第十一章 对Stream流的聚合函数处理

目录 一、对流中数据进行聚合计算 二、对流中数据进行分组 三、对流中数据进行多级分组 四、对流中数据进行分区 4.1. 使用方式及代码 4.2. 分区于分组的区别 分区&#xff08;Partitioning&#xff09; 分组&#xff08;Grouping&#xff09; 实际应用场景 五、对流…

20-大模型外挂知识库优化——负样本样本挖掘篇

大模型外挂知识库优化——负样本样本挖掘篇 一、为什么需要构建负难样本&#xff1f; 在各类检索任务中&#xff0c;为训练好一个高质量的检索模型&#xff0c;往往需要从大量的候选样本集合中采样高质量的负例&#xff0c;配合正例一起进行训练。 二、负难样本构建方法篇 …

WIFI-TTL透传模块说明书

WIFI-TTL透传模块说明书 V 1.0 2022-11-24 目录 1 简介... 4 2 模块参数... 4 3 接口定义... 5 4 设备配网... 6 5 AT指令... 11 6 恢复出厂... 12 7 设备配置... 13 7.1 配置界面说明... 13 7.2 TTL串口配置... 13 7.3 …

【Patroni官方文档】FAQ

FAQ&#xff08;常见问题解答&#xff09; 在本节中&#xff0c;您将找到关于Patroni的最常见问题的答案。每个小节都试图关注不同类型的问题。 我们希望这能帮助您澄清大部分问题。如果您仍然有进一步的疑虑或遇到意外问题&#xff0c;请参考“聊天和报告错误”部分&#xf…

交易术语汇总(Technical Trading Dictionary)

Arbitrage (套利) --- 一种利用交易所之间的差价获利的方法。 Accumulation (累积) --- 在一种资产中建立头寸的过程。 Ask/Bid (询价/竞价) --- 卖出订单是询价(Ask)&#xff0c;买入订单是出价(Bid)。 ATH&#xff08;历史最高价) --- All-time high 全时高。 Bearish MS…

c++20模块示例

模块接口声明&#xff0c;MyModule.cppm&#xff1a; export module MyModule; export namespace MyNamespace {void printHello(); }模块实现&#xff0c;MyModuleImpl.cpp&#xff1a; module;#include <iostream>module MyModule; namespace MyNamespace {void prin…

最简单的设计模式,抽象工厂模式,是否属于过度设计?

目录 一、不采用抽象工厂模式1、抽象产品2、具体产品3、测试类 ~ 不用抽象工厂模式4、新增笔记本的CPU和内存5、在Client测试类中新增&#xff1a; 二、那么&#xff0c;如果采用抽象工厂模式优化上面代码&#xff0c;要怎么做呢&#xff1f;抽象工厂模式通常包括以下几个部分&…