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

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

文章目录

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

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

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

1. 安装vue-clipboard插件

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

cmake 复制代码
npm install vue-clipboard2
或
yarn add vue-clipboard2

2. 引入vue-clipboard插件

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

javascript 复制代码
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);

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

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

javascript 复制代码
<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来实现

javascript 复制代码
<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插件:

cmake 复制代码
npm i vue-clipboard3 --save
或
yarn add i vue-clipboard3 --save

2. 引入vue-clipboard插件

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

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

javascript 复制代码
<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>
相关推荐
froginwe1115 小时前
Python 3 输入和输出
开发语言
小何好运暴富开心幸福15 小时前
C++之再谈类与对象
开发语言·c++·vscode
zhangfeng113315 小时前
R 导出 PDF 时中文不显示 不依赖 showtext** 的最简方案(用 extrafont 把系统 TTF 真正灌进 PDF 内核)
开发语言·r语言·pdf·生物信息
应用市场16 小时前
自建本地DNS过滤系统:实现局域网广告和垃圾网站屏蔽
开发语言·php
郝学胜-神的一滴16 小时前
中秋特别篇:使用QtOpenGL和着色器绘制星空与满月
开发语言·c++·算法·软件工程·着色器·中秋
羊羊小栈16 小时前
基于「YOLO目标检测 + 多模态AI分析」的光伏板缺陷检测分析系统(vue+flask+模型训练+AI算法)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
Predestination王瀞潞16 小时前
Python oct() 函数
开发语言·python
生物小卡拉16 小时前
R脚本--PCA分析系列1_v1.0
开发语言·r语言
生物小卡拉16 小时前
R脚本——LefSE分析与可视化-v1
开发语言·r语言
fl17683116 小时前
基于python+tkinter实现的自动组卷评卷考试系统python源码+课程设计+项目说明
开发语言·python·课程设计