在vue或H5中使用复制粘贴功能

1、使用原生的方法

一般都是在浏览器上使用,所以兼容性不是很好

我是直接使用原生方法创建的input,你也可以直接在DOM上加input标签,然后去获取它的value值.

copyUrl(){
   let url = 'https://blog.csdn.net/linfng023/article/details/101014133';
   let domInput = document.createElement('input');
   domInput.value = url;
   document.body.appendChild(domInput);  // 添加input节点
   domInput.select(); // 选择对象;
   document.execCommand("Copy"); // 执行浏览器复制命令
   this.$toast({
     message: `链接复制成功！`,
     duration: 2000
   });
   domInput.remove()
},

2、使用插件的方式clipboard.js

1.安装clipboard.js,可以使用npm安装(也可以cnpm)

npm install clipboard --save

2.引入clipboard.js,可以mian.js上直接引用(全局使用),也可以在你需要复制粘贴的组件上引用(局部使用)

import clipboard from 'clipboard'; 
//注册到vue原型上 
Vue.prototype.clipboard = clipboard;

3.然后复制粘贴

 <button class="copyClass" data-clipboard-action="copy" data-clipboard-text="XXXXXX" @click="copyLink">复制链接</button>

copyLink() {
    let clipboardUrl = new this.clipboard(".copyClass");
    clipboardUrl.on('success', function () {
      _this.$toast({
        message: `链接复制成功！`,
        duration: 2000
      });
    });
    clipboardUrl.on('error', function () {
      console.log(clipboardUrl)
    });
}