vue2和vue3中点击复制粘贴和实现原理

文章目录 一、技术使用背景二、Vue2(点击复制粘贴功能的实现)1.安装库并引入2.定义methods和template结构(两种实现的方法)3.测试结果第二种使用的方法 三、Vue3(点击复制粘贴功能的实现)1.安装库并导入2.解构api、定义methods3.测试结果如下: 四、复制技术的实现原理

---

一、技术使用背景

在Vue3中涉及到,点击按钮实现复制粘贴的功能。通过查询得到如下的解决方案

二、Vue2(点击复制粘贴功能的实现) 1.安装库并引入

安装: npm i vue-clipboard2

main.js中全局导入

代码如下:

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

如下图:

2.定义methods和template结构(两种实现的方法)

①功能实现: HTML结构:

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

①功能实现:定义的方法和赋值的参数(这里也可以是外部传入的值):

  data() {
    return {
      text: "",//定义的双向绑定的参数
    };
  },
  methods: {
  //定义的方法
    copy() {
    //参数是复制的内容
    //.then()中的函数是复制成功和复制失败的两个回调函数
      this.$copyText(this.text).then(
        (e) => {
          alert("复制text: " + this.text + " 成功!!");
          console.log(e);
        },
        (err) => {
          alert("复制失败");
          console.log(err);
        }
      );
    },
  },

3.测试结果

第二种使用的方法

第二种使用的方法

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

三、Vue3(点击复制粘贴功能的实现) 1.安装库并导入

安装: npm i vue-clipboard3 --save

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

2.解构api、定义methods

Html结构如下

<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.测试结果如下:

测试结果如下:

四、复制技术的实现原理

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