vue 实现点击复制文本到剪贴板

vue 实现点击复制文本到剪贴板 共四种方法

1. navigator.clipboard.writeText该方法需要在安全域下才能够使用,比如:https 协议的地址、127.0.0.1、localhost

<template><div><el-button type="primary" @click="btn1">复制方法一</el-button><div style="margin-top: 50px">{{ message }}</div>  // 复制的内容</div>
</template>
<script>
export default {data() {return {message: "床前明月光",};},methods: {// 方法一btn1() {// navigator.clipboard.writeText 该方法需要在安全域下才能够使用,比如:https 协议的地址、127.0.0.1、localhostnavigator.clipboard.writeText(this.message).then(() => {this.$message.success("复制成功");}).catch((err) => {// 复制失败console.error("复制失败");});},},
};
</script>

2. execCommand方法即将被废弃

<template><div><el-button type="primary" @click="btn2">复制方法二</el-button><div style="margin-top: 50px">{{ message1 }}</div></div>
</template>
<script>
export default {data() {return {message1: "疑是地上霜",};},methods: {// 方法二  execCommand方法即将被废弃btn2() {let input = document.createElement("input");document.body.appendChild(input);input.value = this.message1; // 此处为需要复制的文本变量input.focus();input.select();try {let result = document.execCommand("copy");document.body.removeChild(input);if (!result) {console.error("复制失败");} else {this.$message.success("复制成功");}} catch (e) {document.body.removeChild(input);alert("当前浏览器不支持复制功能,请检查更新或更换其他浏览器操作");}},},
};
</script>

3. 使用vue-clipboard2库

  1. 安装 npm install --save vue-clipboard2
  2. main.js 中引入
    在这里插入图片描述
<template><div><el-buttontype="primary"v-clipboard:copy="message2"v-clipboard:success="onCopy"v-clipboard:error="onError">复制方法三</el-button><div style="margin-top: 50px">{{ message2 }}</div></div>
</template>
<script>
export default {data() {return {message2: "举头望明月",};},methods: {// 方法三// 使用vue-clipboard2库// 安装 npm install --save vue-clipboard2// 在main.js中引入// import VueClipboard from 'vue-clipboard2';// Vue.use(VueClipboard);onError() {console.error("复制失败");},// 复制onCopy() {this.$message.success("复制成功");},},
};
</script>

4. 使用clipboard.js库

  1. npm install clipboard --save
  2. 当前文件引入 import ClipboardJS from "clipboard";
<template><div><el-button type="primary" class="btn">复制方法四</el-button><div style="margin-top: 50px">{{ message3 }}</div></div>
</template>
<script>
import ClipboardJS from "clipboard";
export default {data() {return {message3: "低头思故乡",};},mounted() {// 方法四// cnpm install clipboard --save// 当前文件引入 import ClipboardJS from "clipboard";let that = this;const clipboard = new ClipboardJS(".btn", {text: function () {return that.message3;},});clipboard.on("success", function (e) {console.log("复制成功");});clipboard.on("error", function (e) {console.log("复制失败");});}
};
</script>
  1. 推荐使用第一种或者第三种,请根据自身需求选择适当的方法!

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

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

相关文章

【PostgreSQL】从零开始:(八)PostgreSQL-数据库PSQL元命令

元命令 postgres# \? General\bind [PARAM]... set query parameters\copyright show PostgreSQL usage and distribution terms\crosstabview [COLUMNS] execute query and display result in crosstab\errverbose show most recent error…

Docker 部署 Lobe Chat 服务

拉取最新版本的 Lobe Chat 镜像&#xff1a; $ sudo docker pull lobehub/lobe-chat:latest使用以下命令来运行 Lobe Chat 容器: $ sudo docker run -d --name lobe-chat -p 10084:3210 -e OPENAI_API_KEYsk-xxxx -e OPENAI_PROXY_URLhttps://api.openai.com/v1 -e ACCESS_CO…

ES6 面试题 | 13.精选 ES6 面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

深度神经网络在作为人类听觉模型方面显示出了前景

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

android Retrofit2.0请求 延长超时操作

import okhttp3.OkHttpClient; import retrofit2.Retrofit; import retrofit2.converter.gson.GsonConverterFactory;public class MyApiClient {private static final String BASE_URL "https://api.example.com/";// 创建 OkHttpClient&#xff0c;并设置超时时间…

普冉(PUYA)单片机开发笔记(10): I2C通信-配置从机

概述 I2C 常用在某些型号的传感器和 MCU 的连接&#xff0c;速率要求不高&#xff0c;距离很短&#xff0c;使用简便。 I2C的通信基础知识请参见《基础通信协议之 IIC详细讲解 - 知乎》。 PY32F003 可以复用出一个 I2C 接口&#xff08;PA3&#xff1a;SCL&#xff0c;PA2&a…

C++ 运算符重载

目录 前言 算术运算符重载 加号运算符 位运算符重载 左移运算符 自增自减运算符重载 前置自增运算符 后置自增运算符 赋值运算符重载 等号赋值运算符重 关系运算符重载 相等 不等 函数调用运算符重载 总结 前言 在C中&#xff0c;运算符重载是一种强大的特性…

C语言经典错误总结(三)

一.指针与数组理解 我们都知道定义一个数组然后对其进行各种想要的操作&#xff0c;但是你真的能够区分那些是对数组的操作&#xff0c;那些是通过指针实现的吗&#xff1f; 例如;arr[1]10;这个是纯粹对数组操作实现的吗&#xff1f; 答案肯定不是&#xff0c;实际上我们定义…

目标检测YOLO实战应用案例100讲-自动驾驶复杂场景下目标检测(续)

目录 3.2 YOLOv5框架的分析 3.3改进算法的基本思想 3.4改进聚类算法 3.5重构损失函数模型和NMS算法<

HiveSql语法优化四 :Bucket Map Join和Sort Merge Bucket Map Join优化

Bucket Map Join 之前的map join适用场景是大表join小表的情况&#xff0c;但是两张表都相对较大&#xff0c;若采用普通的Map Join算法&#xff0c;则Map端需要较多的内存来缓存数据&#xff0c;当然可以选择为Map段分配更多的内存&#xff0c;来保证任务运行成功。但是&#…

数据可视化---柱状图

import matplotlib.pyplot as plt import numpy as npdef plot_bar_chart(data, labels, colorsNone, title"Bar Chart", xlabel"X-Axis", ylabel"Y-Axis"):"""绘制柱状图&#xff0c;并在柱子上显示数量和比例。:param data: 包…

pytest之allure测试报告03:allure动态自定义报告

1、测试用例模块中引入allure&#xff1a;import allure 2、yaml文件中定义添加title、story的值&#xff1a; 3、测试用例中读取调用。eg:allure.dynamic.title() 4、运行报告查看&#xff1a;成功动态展示yaml文件中配置的story、title

共同编辑文档功能实现(websocket)

目录 前言 websocket封装 wangeditor下载 共同编辑文档代码实现 HTML样式部分 JS部分 css部分 前言 功能&#xff1a;实现文档共同编辑功能&#xff0c;可以实时接收到其他人的信息 思路&#xff1a;先调用接口获取相应的数据进行渲染&#xff0c;然后通过webSocket建…

当 Sealos 遇上区块链

当 Sealos 遇上区块链 拿着区块链技术不一定是去发币&#xff0c;很多业务系统也适合用这些技术&#xff0c;比如做个统一支付系统&#xff0c;积分系统等&#xff0c;可以做为一家公司的金融基础设施&#xff0c;或支付中台。拿链的技术去做有很多好处&#xff1a; 高可用&a…

【图的应用一:最小生成树】- 用 C 语言实现普里姆算法

目录 一、最小生成树 二、普里姆算法的构造过程 三、普里姆算法的实现 一、最小生成树 假设要在 n 个城市之间建立通信联络网&#xff0c;则连通 n 个城市只需要 n - 1 条线路。这时&#xff0c;自然会考虑这样一个问题&#xff0c;如何在最节省经费的前提下建立这个通信…

AUTOSAR汽车电子嵌入式编程精讲300篇-车载CAN总线网关的网络安全协议设计(续)

目录 3.2 网关过滤功能模块设计 3.3 车载网关ID安全等级分类 3.3.1 ID安全等级划分标准

Ansible运行临时命令

Ansible服务的强大之处在于只需要一条命令&#xff0c;便可以操控成千上万台的主机节点&#xff0c;而ansible命令便是最得力的工具之一。前文提到&#xff0c;Ansible服务实际上只是一个框架&#xff0c;能够完成工作的是模块化功能代码。Ansible的常用模块大致有20多个&#…

机器学习之无监督学习

聚类&#xff1a;发掘纵向结构的某种模式信息&#xff0c;某些x属于相同的分布或者类别 特征学习&#xff1a;发掘横向结构的某种模式信息&#xff0c;每一行都可以看成是一种属性或特征 密度估计&#xff1a;发掘底层数据分布&#xff0c;x都是从某个未知分布p(x)采出来的&a…

代码随想录 474. 一和零

题目 给你一个二进制字符串数组 strs 和两个整数 m 和 n 。 请你找出并返回 strs 的最大子集的长度&#xff0c;该子集中 最多 有 m 个 0 和 n 个 1 。 如果 x 的所有元素也是 y 的元素&#xff0c;集合 x 是集合 y 的 子集 。 示例 1&#xff1a; 输入&#xff1a;strs [“10…

vue实现悬浮窗拖动的自定义指令

首先在自己的项目根目录下建一个 src --> config --> drag.js 然后在main.js中全局引入 //鼠标拖动 import drag from /config/drag; Vue.use(drag); drag.js文件相关代码 import Vue from vue; //使用Vue.directive()定义一个全局指令 //1.参数一&#xff1a;指令的…