关于vue.js:vue的复制粘贴-clipboardjs

38次阅读

共计 617 个字符,预计需要花费 2 分钟才能阅读完成。

点击复制性能次要通过 clipboard.js 来实现

1、引入 clipboard.js,办法如下:

第一种间接 npm 装置:npm install clipboard –save

第二种:<script src=”js/clipboard.min.js”></script>(下载地址:https://clipboardjs.com/)

2、在须要应用的组件中 import

援用办法:import Clipboard from ‘clipboard’;

components: {Clipboard},

3、增加须要复制的内容

例如:<button class=”tag-read” data-clipboard-text=” 我是能够复制的内容,请点击复制 ” @click=”copy”> 立刻浏览 </button>

解析:data-clipboard-text 后边跟须要复制的内容

4、增加点击后的办法

copy(index){var clipboard = new Clipboard('.copyStr'+index);
  clipboard.on('success', e => {this.$message.success("复制胜利");
    // 开释内存
    clipboard.destroy()})
  clipboard.on('error', e => {
    // 不反对复制
    this.$message.warning("该浏览器不反对主动复制");
    // 开释内存
    clipboard.destroy()})
},

正文完
 0