vue2和vue3中实现点击复制粘贴功能

提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • Vue2(点击复制粘贴功能的实现)
    • 1. 安装vue-clipboard插件
    • 2. 引入vue-clipboard插件
    • 3. 在组件中使用复制粘贴功能
  • Vue3(点击复制粘贴功能的实现)
    • 1. 安装vue-clipboard插件
    • 2. 引入vue-clipboard插件
    • 3. 在组件中使用复制粘贴功能


使用vue-clipboard插件在Vue2和Vue3中实现点击复制粘贴的功能,需要经过以下几个步骤:

Vue2(点击复制粘贴功能的实现)

1. 安装vue-clipboard插件

在项目根目录下,使用npm或者yarn命令安装vue-clipboard插件:

npm install vue-clipboard2
或
yarn add vue-clipboard2

2. 引入vue-clipboard插件

在Vue项目的入口文件(通常是main.js或者main.ts)中,引入并使用vue-clipboard插件:

import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);

3. 在组件中使用复制粘贴功能

第一种方法:在需要使用复制粘贴功能的组件中,通过v-clipboard指令来实现

<template><div class="container">{{qq}}<button type="button" v-clipboard:copy="qq" //复制的内容v-clipboard:success="Copy" //复制成功调用的方法v-clipboard:error="Error" //复制失败调用的方法>复制QQ</button></div>
</template>
<script>
export default {data() {return {qq:'123456 '}},methods: {Copy: function (e) {alert('复制成功: ' + e.text)},Error: function (e) {alert('复制失败')}}}
</script> 

第二种方法:在需要使用复制粘贴功能的组件中,通过 this.$copyText来实现

<template><button @click="copyText()">点击复制</button>
</template><script>
export default {data() {return {textToCopy: '要复制的文本',};},methods: {copyText(row) {this.$copyText(this.textToCopy.replace(/( |null)/g, '')).then((e) => {Message('复制成功!', 'success')console.log(e);},(err) => {Message('复制失败,请重试!')console.log(err);});},
};
</script>

Vue3(点击复制粘贴功能的实现)

1. 安装vue-clipboard插件

在项目根目录下,使用npm或者yarn命令安装vue-clipboard插件:

npm i vue-clipboard3 --save
或
yarn add i vue-clipboard3 --save

2. 引入vue-clipboard插件

在需要文件中导入: import clipboard3 from “vue-clipboard3”;

3. 在组件中使用复制粘贴功能

<template><div class="hello"><input type="text" v-model="text"><button @click="copy">点击复制</button></div>
</template>
<script setup>
// 引入vue-clipboard3
import clipboard3 from "vue-clipboard3";
const copy = async () => {const { toClipboard } = clipboard3();try {await toClipboard(data.text);showToast('复制成功!')} catch (error) {showToast("复制失败!")}
};
</script>

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

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

相关文章

【面试干货】静态类型的特点及其在Java中的应用

【面试干货】静态类型的特点及其在Java中的应用 1、静态类型的特点1.1 静态属性1.2 静态方法1.3 静态类 2、静态类型在Java中的应用 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在面向对象编程中&#xff0c;静态类型 是一种重要的概念&…

非关系数据库-数据库基础理论概述

数据库基础理论概述 数据库作为现代信息技术的核心组件之一&#xff0c;其重要性不言而喻。本文将从数据库的基本概念出发&#xff0c;逐步深入到数据库的设计、管理、以及安全性等关键领域&#xff0c;并结合实际案例&#xff0c;让读者对数据库有一个全面而深入的理解。同时…

hnust 1100 实验3-2:素数判断

hnust 1100 实验3-2&#xff1a;素数判断 题目描述 判断正整数x是否为素数。 质数又称素数。指在一个大于1的自然数中&#xff0c;除了1和此整数自身外&#xff0c;没法被其他自然数整除的数。换句话说&#xff0c;只有两个正因数&#xff08;1和自己&#xff09;的自然数即为…

网传不好投了?2区Frontiers“水刊”强势回归,11天录用,十投九中!

本周投稿推荐 SSCI • 1区&#xff0c;4.0-5.0&#xff08;无需返修&#xff0c;提交可录&#xff09; EI • 各领域沾边均可&#xff08;2天录用&#xff09; CNKI • 7天录用-检索&#xff08;急录友好&#xff09; SCI&EI • 4区生物医学类&#xff0c;0.1-0.5&…

MySQL 主从复制集群高可用

在实际的生产环境中&#xff0c;如果对数据库的读和写都在同一个数据库服务器中操作&#xff0c;无论是在安全性、高可用性还是高并发等各个方面都是完全不能满足实际需求的。因此&#xff0c;一般来说 都是通过主从复制&#xff08;Master-Slave&#xff09;来同步数据&#x…

【python全栈系列】day05-python数据类型-List

1、概述 Python中的列表是一种有序的集合&#xff0c;用于存储一系列的数据项&#xff0c;这些数据项可以是数字、文本、对象&#xff0c;甚至其他列表有序可变&#xff08;同一个内存地址中的数据变化&#xff09; 2、列表的操作 2.1、创建 #1.创建列表 list1 [] #空列…

linux系统中vim ls grep等命令无法使用

linux突然vim ls grep等命令无法使用 系统配置路径被修改导致无法使用: echo $PATH 查看配置路径 添加路径 执行以下命令 export PATH$PATH:/root/bin export PATH$PATH:/usr/sbin

Spring MVC数据绑定和响应——复杂数据绑定(二)集合绑定

一、集合绑定的使用 集合中存储简单类型数据时&#xff0c;数据的绑定规则和数组的绑定规则相似&#xff0c;需要请求参数名称与处理器的形参名称保持一致。不同的是&#xff0c;使用集合绑定时&#xff0c;处理器的形参名称需要使用RequestParam注解标注。 接下来使用集合数…

OpenCV使用forEach的方式来遍历像素值

opencv 4.x新增了forEach的方式遍历像素值&#xff0c;比传统方式略快一些。因为它本身是使用多线程并行的方法来遍历的。从opencv源码能看到这句话&#xff1a; parallel_for_(cv::Range(0, LINES), PixelOperationWrapper(reinterpret_cast<Mat_<_Tp>*>(this), …

模块化沙箱的优势与应用

在数字化时代&#xff0c;数据安全已成为企业乃至国家层面不可忽视的重要议题。随着云计算、大数据等技术的广泛应用&#xff0c;数据泄露、恶意攻击等安全威胁日益严峻。在这样的背景下&#xff0c;模块化沙箱技术应运而生&#xff0c;为企业提供了高效、灵活的数据安全解决方…

【LeetCode】每日一题:二叉树的锯齿形层序遍历

给你二叉树的根节点 root &#xff0c;返回其节点值的 锯齿形层序遍历 。&#xff08;即先从左往右&#xff0c;再从右往左进行下一层遍历&#xff0c;以此类推&#xff0c;层与层之间交替进行&#xff09;。 解题思路 python列表可以很简单用reverse&#xff0c;remove的方法…

3d模型材质吸不了什么原因?怎么解决?---模大狮模型网

3D模型无法吸取材质可能有以下原因&#xff1a; 文件格式不支持&#xff1a;某些文件格式(如STL)不支持嵌入材质信息&#xff0c;因此在导入此类文件后&#xff0c;需要手动为模型添加材质。 材质链接错误&#xff1a;如果模型文件中嵌入了材质信息&#xff0c;但是链接错误&a…

【LeetCode面试经典150题】112. 路经总和

一、题目 112. 路径总和 - 力扣&#xff08;LeetCode&#xff09;给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径&#xff0c;这条路径上所有节点值相加等于目标和 targetSum 。如果存在&#xff0c;返回 true &…

2024主持人资格考试报名6月24日开始

2024全国广播电视播音员主持人资格考试报名工作开始。 报名时间&#xff1a;6.24-7.5日 考试时间&#xff1a;9.7-8日 今年笔试有很大变化&#xff1a;客观题改为机测&#xff0c;主观题答题卡笔测。 报名网址&#xff1a;国家广播电视总局官网 #播音员主持人资格证 #备考播音员…

高效利用iCloud指南:打造无缝连接的数字生活

iCloud是苹果公司推出的一项云存储和云计算服务&#xff0c;它为用户提供了一个安全、便捷的云端存储空间&#xff0c;帮助用户在各个苹果设备之间无缝同步数据。无论是照片、文档、备忘录&#xff0c;还是应用程序数据&#xff0c;iCloud都能让你的数字生活更加高效和有序。本…

Linux基础 - 使用 vsftpd 服务传输文件

零. 简介 文件传输协议&#xff08;File Transfer Protocol&#xff0c;FTP&#xff09;是用于在网络上进行文件传输的标准网络协议。 FTP 允许客户端和服务器之间进行文件的上传、下载、删除、重命名等操作。它基于客户端 - 服务器模型工作&#xff0c;通常使用 TCP 协议进行…

Gradio官方教程一:Gradio生态系统、主要组件及Interface class简介

文章目录 一、快速开始1.1 创建第一个demo1.2 分享demo1.3 Interface Class1.4 Core Gradio Classes1.5 Gradio生态系统 二、Gradio的主要特点2.1 组件&#xff08;Components&#xff09;2.1.1 组件属性2.1.2 静态与交互式组件2.1.3 预处理和后处理 2.2 并发&#xff08;Queui…

基于强化学习的目标跟踪论文合集

文章目录 2020UAV Maneuvering Target Tracking in Uncertain Environments Based on Deep Reinforcement Learning and Meta-LearningUAV Target Tracking in Urban Environments Using Deep Reinforcement Learning 2021Research on Vehicle Dispatch Problem Based on Kuhn-…

java中的Collections工具类

Collections类是java中提供的一个工具类&#xff0c;它和接口Collection乍一看非常相像&#xff0c;但是二者的区别是非常大的&#xff0c;最明显的就是它们一个是类&#xff0c;而另一个是接口了。Collections工具类的作用是对Set 、Map、 List这些容器提供辅助方法来对容器中…

编写一个基于其他系的linux系统并且把它打包为一个iso镜像思想

目录 前面写的一篇文章 前言 isolinux引导模式启动流程 为什么要initramdisk操作而不直接加载文件系统 编写系统的思想 可能问题 一般的iso镜像目前只支持最大4G的大小&#xff0c;需要怎么解决&#xff1f; 如何去找驱动 木木em哈哈想说的话&#xff08;与本博文无光&…