vue实现点击按钮复制内容

 原理 

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

1.安装库并引入

安装: npm i vue-clipboard2

main.js中全局导入

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

2.定义methods和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);
        }
      );
    },
  },

第二种使用的方法 指令

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

1.安装库并导入

安装: npm i vue-clipboard3 --save

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

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

retrun:{msg,toClipboard ,copy }