vue2和vue3中点击复制粘贴

1、效果展示：

点击复制小图标进行内容的复制，然后提示复制成功!

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

第一种使用的方法：

2-1、安装库并引入

npm i vue-clipboard2

 

 2-2、main.js 全局导入

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

2-3、给 复制icon图标 添加点击 @click="copyText(row)" 事件

<el-table-column align="center" label="客服单状态" width="90" fixed>
    <template #default="{ row }">
        <div style="cursor: pointer;">
            {{ row.woStatusDesc }}
            <a-icon type="snippets" style="font-size: 14px;color: rgb(85, 157, 249);" @click="copyText(row)" />
        </div>
    </template>
</el-table-column>

2-4、methods实现功能

data(){
    return {
        text:"",
    }
},
methods:{
    copyText(row) {
      const {
        code,
        woCode,
        customerName,
        callPhone,
        provinceName,
        cityName,
        districtName,
        address,
        brandName,
        categoryName1,
        categoryName2,
        categoryName3,
        woTypeName,
        woContentName,
        latestContent,
      } = row;
      this.text = `订单号：${code}
                   客服单号：${woCode}
                   姓名：${customerName}
                   电话：${callPhone}
                   详细地址：${provinceName}/${cityName}/${districtName}/${address}
                   产品品类：${brandName} ${categoryName1}/${categoryName2}/${categoryName3}
                   客服单类型/分类：${woTypeName}/${woContentName}
                   用户诉求：${latestContent}
                   最新处理记录：${latestContent}`
      //参数是复制的内容
      //.then()中的函数是复制成功和复制失败的两个回调函数
      this.$copyText(this.text.replace(/( |null)/g, '')).then(
        (e) => {
          Message('复制成功!', 'success')
          console.log(e);
        },
        (err) => {
          Message('复制失败,请重试!')
          console.log(err);
        }
      );
    },
  }

第二种使用的方法：

<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> 

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

3-1、安装库并引入

npm i vue-clipboard3 --save

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

3-3、解构api、定义methods

<template>
  <div class="hello">
    <input type="text" v-model="text">
    <button @click="copy">点击复制</button>
  </div>
</template>

代码如下:toClipboard() 第一个参数是文本;第二个参数是节点 

    //操作如下
    const text =ref("")
    //解构出复制方法
    const { toClipboard } = clipboard3();
    const copy = async () => {
     try {
        await toClipboard(text.value);
        alert("复制的text: "+text.value+' 复制成功!!')
     } catch (error) {
       alert("复制失败!!")
     }
    };

3-5、测试结果如下：

 

4、复制技术的实现原理 

<template>
  <div class="about">
    <input type="text" v-model="text">
    <button @click="Copy">复制</button>
  </div>
</template>

<script>
export default {
 data() {
   return {
     text:'' //定义复制变量
   }
 },
 methods:{
 //定义方法
   Copy(){

     let inputs=document.createElement("input")     //创建节点
     inputs.value=this.text //给节点赋值
     document.body.appendChild(inputs) //渲染节点(要不然不起作用,可以添加隐藏属性)
     inputs.select() //选中节点
    let  actions =  document.execCommand("Copy") //指定复制命令(返回的是一个boolean类型)
     alert(actions)
   }
 }
}
</script>

原文地址：http://t.csdn.cn/DgYv9