前端点击按钮触发复制文本

1. 效果展示:

点击复制小图标进行内容的复制
在这里插入图片描述


在这里我们先不考虑适用插件的情况,因为如果只是简单的复制,则不需要插件

2. 绑定事件

这里我们以vue为例子, 原生和react我后面补上

<i slot="prefix" class="iconfont icon-fuzhi theme" @click="copy"></i>
const copy = async () => {try {await navigator.clipboard.writeText('需要复制的内容')console.log('复制成功')} catch(err) {console.log('复制失败', err)}
}

是不是很简单!!!

给个三连关注一下吧

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA基础之垃圾收集器

一 JVM垃圾收集 分代收集思想 当前虚拟机的垃圾收集一般采用分代收集算法&#xff0c;这种算法本身没有创新性&#xff0c;只是根据对象存活周期的不同将内存分为几块。一般将java堆内存分为新生代和老年代&#xff0c;这样我们就可以根据不同年龄到的特点选择不同的垃圾收集…

JavaScript作用域

一&#xff0c;作用域 就是代码名字&#xff08;变量&#xff09;在某个范围起作用和效果 1.全局作用域 整个script标签 &#xff0c;或一个js文件 2.局部作用域&#xff08;函数作用域&#xff09; 这个名字只在函数内部起作用和效果 二&#xff0c;变量作用域 1.全局变…

实战 | 无视杀软使用远控工具进行横向移动Tips

实战 | 无视杀软使用远控工具进行横向移动Tips。 在有杀软拦截&#xff0c;CS无法上线的情况下&#xff0c;经常用到todesk和向日葵这两个远控工具进行横向移动。不过这两个工具现在好像不怎么好用了。不过无所谓&#xff0c;用其他的就是了&#xff0c;听说最近GotoHTTP很火&…

PLC_博图系列☞P_TRIG:扫描 RLO 的信号上升沿

PLC_博图系列☞P_TRIG&#xff1a;扫描 RLO 的信号上升沿 文章目录 PLC_博图系列☞P_TRIG&#xff1a;扫描 RLO 的信号上升沿背景介绍P_TRIG&#xff1a; 扫描 RLO 的信号上升沿说明参数示例 关键字&#xff1a; PLC、 西门子、 博图、 Siemens 、 P_TRIG 背景介绍 这是一…

展商企业【广东伟创科技开发有限公司】| 2024水科技大会暨技术装备成果展

企业介绍 广东伟创科技开发有限公司成立于2006年&#xff0c;位于广东省江门市。公司是华南理工大学造纸与污染控制国家工程研究中心科技成果转化单位&#xff1b;是华南理工大学产学研合作单位&#xff1b;是广东省高新技术企业&#xff1b;是江门市现代信息服务业重点企业&am…

路由策略实验

一.实验要求 1、按照图示配置 IP 地址&#xff0c;R1&#xff0c;R3&#xff0c;R4 上使用 loopback 口模拟业务网段 2.R1 和 R2 运行 RIPV2在 RIP R2&#xff0c;R3 和 R4运行 OSPF&#xff0c;各自协议内部互通 3.在RIP和 OSPF 间配置双向路由引入&#xff0c;要求除 R4 上…

Macs Fan Control Pro for Mac:全面优化Mac风扇控制软件

Macs Fan Control Pro for Mac是一款专为苹果电脑用户设计的风扇控制软件&#xff0c;旨在通过精确的风扇速度调节&#xff0c;全面优化Mac的散热性能&#xff0c;确保系统始终运行在最佳状态。 Macs Fan Control Pro for Mac中文版下载 该软件具备实时监控功能&#xff0c;能够…

让流程图动起来

我们平时画流程&#xff0c;然后贴到文档&#xff0c;就完事了。但是过程演示的时候&#xff0c;如果只是一张静态图&#xff0c;很难吸引到听众的注意力&#xff0c;表达效果并不太好。常用的方法是可以用PPT进行动态演示&#xff0c;做PPT也是需要花一些时间&#xff0c;同时…

kaggle 泰坦尼克使用xgboost 得分0.73684

流程 导入所要使用的包引入kaggle的数据集csv文件查看数据集有无空值填充这些空值提取特征分离训练集和测试集调用模型 导入需要的包 import pandas as pd import numpy as np import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarni…

百度AI大会发布的APP Builder和Agent Builder有什么区别

百度在AI大会发布了三款AI工具&#xff0c;包括智能体开发工具AgentBuilder、AI原生应用开发工具AppBuilder、各种尺寸的模型定制工具ModelBuilder 有很多人就问&#xff0c;APP Builder和Agent Builder有什么不一样&#xff0c;怎么那么多builder? 你们就这么理解&#xff…

springboot的开发流程

文章目录 springboot的开发流程 1.创建maven项目2.引用依赖 1&#xff09;起步依赖2&#xff09;项目依赖3.启动类4.配置文件5.业务代码 1)dto2)controller6.restful测试7.部署 1&#xff09;打包2&#xff09;部署 springboot的开发流程 1.创建maven项目 新建maven项目 配置…

39.1k Star ! Meta GPT:AI Agent 排名第一,第一家人工智能软件公司,迈向自然语言编程

作者&#xff1a;Aitrainee | AI进修生 排版太难了&#xff0c;请点击这里查看原文&#xff1a;39.1k Star ! Meta GPT&#xff1a;AI Agent 排名第一&#xff0c;第一家人工智能软件公司&#xff0c;迈向自然语言编程 39.1k Star ! Meta GPT&#xff1a;AI Agent 排名第一&…