vue3中的复制功能怎么做

很简单,比如想要复制p标签里面的1111,给他一个点击事件,然后加上navigator.clipboard.writeText即可完成。

说明:

​​​​​​​        navigator.clipboard 是 Web API 中的一个对象,它提供了对剪贴板的访问权限,可以通过它来读取或写入剪贴板的内容。

  writeText(text)navigator.clipboard 对象提供的一个方法,用于将指定的文本内容写入剪贴板。

<template><p @click="onclick">1111</p><input type="text">
</template>
<script setup>const onclick = (e) => {navigator.clipboard.writeText(e.target.innerText)alert('复制成功')  //提示
}</script><style lang='scss' scoped></style>

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

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

相关文章

创业公式(保罗·格雷厄姆)

保罗格雷厄姆有一套完整的创业哲学&#xff0c;他的创业公式是&#xff1a; &#xff08;1&#xff09;搭建原型 &#xff08;2&#xff09;上线运营&#xff08;别管bug&#xff09; &#xff08;3&#xff09;收集反馈 &#xff08;4&#xff09;调整产品 &#xff08;5&…

【ZZULIOJ】1050: 阶乘的累加和(Java)

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy code 题目描述 求1! 2! ……n! 输入 输入一个整数n&#xff0c;你可以假定n不大于10。 输出 输出一个整数&#xff0c;即阶乘累加的结果&#xff0c;单独占一行。 样例输入 Copy 4 样例输出 Copy 33 co…

基于51单片机的DAC0832锯齿波产生设计

**单片机设计介绍&#xff0c; 基于51单片机的DAC0832锯齿波产生设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于51单片机的DAC0832锯齿波产生设计是一个结合了硬件与软件技术的项目&#xff0c;旨在利用51单片机和DAC08…

【机器学习】决策树(Decision Tree,DT)算法介绍:原理与案例实现

前言 决策树算法是机器学习领域中的一种重要分类方法&#xff0c;它通过树状结构来进行决策分析。决策树凭借其直观易懂、易于解释的特点&#xff0c;在分类问题中得到了广泛的应用。本文将介绍决策树的基本原理&#xff0c;包括熵和信息熵的相关概念&#xff0c;以及几种经典的…

如何申请公派访问学者?(全过程解析)

申请成为访问学者&#xff0c;无疑是增强个人学术实力与拓宽国际视野的绝佳机会。然而&#xff0c;对于初涉此道者&#xff0c;资金往往成为横亘在出国深造之路上的巨大障碍。幸运的是&#xff0c;CSC&#xff08;国家留学基金管理委员会&#xff09;的资助项目&#xff0c;为众…

现代深度学习模型和技术

Transformer模型的理解和应用 Transformer模型自2017年由Vaswani等人在论文《Attention is All You Need》中提出以来&#xff0c;已经彻底改变了自然语言处理&#xff08;NLP&#xff09;领域的面貌。Transformer的核心是自注意力&#xff08;Self-Attention&#xff09;机制…

liunx系统发布.net core项目

liunx系统发布.net core项目 准备.net6程序运行环境部署nginx&#xff0c;通过一个地址既能访问web api&#xff0c;又能访问web项目有一个客户把web api放到docker中&#xff0c;想通过nginx转发&#xff0c;nginx也支持配置多个程序api接口的其它 liunx系统&#xff1a;cento…

惠海H5031 降压恒流芯片IC 支持36V48V60V80V转9V12V5A方案 爆闪 高低亮,远近光

降压恒流芯片IC是一种电子元件&#xff0c;用于将较高的电压转换为较低的电压&#xff0c;并保持电流的稳定。这种芯片IC广泛应用于各种电子设备中&#xff0c;如LED灯、汽车灯光等。 对于您提到的支持36V48V60V80V转9V12V5A方案的降压恒流芯片IC&#xff0c;它可以将36V至80V…

【设计模式】笔记篇

目录标题 OO设计原则策略模式 - Strategy定义案例分析需求思路分析核心代码展示进一步优化UML 图 观察者模式 - Observe定义案例分析需求UML图内置的Java观察者模式核心代码 总结 装饰者模式 - Decorator定义案例分析需求UML图分析核心代码 总结 工厂模式 - Abstract Method/Fa…

突如其来:OpenAI分家的Anthropic公司悄悄地释放出他们的秘密武器——Claude3

突如其来的消息&#xff0c;OpenAI分家的Anthropic公司悄悄地释放出他们的秘密武器——Claude3 这货居然在默默无闻中一举超越了GPT-4的地位。没发布会&#xff0c;没吹牛逼&#xff0c;就发了一帖子。 字少&#xff0c;事大。 Claude3独挡一面的推理能力 Anthropic推出了三款…

【springboot开发】Gradle VS Maven

前言&#xff1a; java构建工具的主要作用是依赖管理和构建的生命周期管理。gradle和maven是目前java中最流行的两个构建工具&#xff0c;springboot常用maven&#xff0c;Android studio使用gradle。 目录 1. 简介2. Maven2.1 安装2.2 依赖管理2.3 构建生命周期管理 3. Gradle…

【noVNC】使用noVNC实现浏览器网页访问vnc(基于web的远程桌面)

1.VNC本身提供的http连接方式&#xff0c;可传输文件&#xff0c;画面有卡顿&#xff0c;需要安装jre 2.noVNC访问方式&#xff0c;不可传输文件&#xff0c;画面较为流畅&#xff0c;不用安装插件运行环境 一、noVNC 是什么 Web 端的Vnc软件&#xff0c;通过noVNC&#xff0…

tsc --init 报错

运行 tsc --init 报错&#xff0c; 全局安装 ts 也不行 通过 npx tsc --init 就可以解决

第十三届蓝桥杯省赛大学B组填空题(c++)

A.扫雷 暴力模拟AC: #include<iostream> using namespace std; const int N105; int n,m,map[N][N],ans[N][N]; int dx[8]{-1,-1,0,1,1,1,0,-1}; int dy[8]{0,1,1,1,0,-1,-1,-1}; int count(int x,int y){int cnt0;for(int i0;i<8;i){int xxxdx[i];int yyydy[i];if(…

【环境变量】常见的环境变量 | 相关指令 | 环境变量系统程序的结合理解 | 环境变量表 | 本地变量环境变量 | 外部命令内建命令

目录 常见的环境变量 HOME PWD SHELL HISTSIZE 环境变量相关的指令 echo&env export unset 本地变量 环境变量整体理解 程序现象_代码查看环境变量 ​整体理解 环境变量表 环境变量表的传递 环境变量表的查看 内建命令 少说废话&#x1f197; 每个用…

python爬虫 爬取网页图片

http://t.csdnimg.cn/iQgHw //爬虫爬取图片其实是很简单的&#xff0c;但是大多数同学&#xff0c;可能对 url的设置一直有困惑&#xff08;这点本人也在研究&#xff09;&#xff0c;而本篇文章&#xff0c;对于想要爬取图片的小白简直是福利。你只需要将文章代码运行即可&am…

一次性将字典中所有value值的字符串中的分隔符统一替换为中文逗号,而不管它们原来是什么分隔符。

一次性将字典中所有value值的字符串中的分隔符统一替换为中文逗号&#xff0c;而不管它们原来是什么分隔符。注意&#xff0c;正则表达式中的中文字符需要使用正确的编码&#xff0c;确保你的Python源文件也使用了相同的编码&#xff08;通常是UTF-8&#xff09;。 import re …

终极数据传输隐秘通道

SOCKS5代理作为网络请求中介的高级形态&#xff0c;提供了一种方法&#xff0c;通过它&#xff0c;数据包在传达其最终目的地前&#xff0c;首先经过一个第三方服务器。这种代理的先进之处在于其对各种协议的支持&#xff0c;包括HTTP、FTP和SMTP&#xff0c;以及它的认证机制&…

超图SuperMap-Cesium,地形图层,可以渲染一个或多个地形(地形可缓存DEM,TIN方式),webGL代码开发(2024-04-08)

1、缓存文件类型TIN格式&#xff0c;TIN的地形sct只能加一个 const viewer new Cesium.Viewer(cesiumContainer); viewer.terrainProvider new Cesium.CesiumTerrainProvider({isSct: true, // 是否为iServer发布的TIN地形服务,stk地形设置为falserequestWaterMask : true,…

AI日报:GPT-4-Turbo正式版自带读图能力;Gemini1.5Pro开放API;SD3将于4月中旬发布;抖音宫崎骏AI特效爆火

欢迎来到【AI日报】栏目!这里是你每天探索人工智能世界的指南&#xff0c;每天我们为你呈现AI领域的热点内容&#xff0c;聚焦开发者&#xff0c;助你洞悉技术趋势、了解创新AI产品应用。 新鲜AI产品点击了解&#xff1a;AIbase - 智能匹配最适合您的AI产品和网站 &#x1f4f…