标签：vue clipboard success 粘贴板 itemIsDisabled Clipboard 复制 copy

一、npm安装clipboard

npm install clipboard --save

二、页面结构

<span id="copyTarget">{{targetCode}}</span>
<span id="copyBtn" :data-clipboard-text="targetCode" data-clipboard-action="copy" data-clipboard-target="#copyTarget" @click="copy">复制</span>

targetCode是被复制的文本

三、引入Clipboard

import Clipboard from "clipboard";

四、copy方法

copy() {
  // 因为此事件不能添加.stop，所以要设置一个开关, 500ms后打开开关
  this.itemIsDisabled = true
  setTimeout(()=>{
    this.itemIsDisabled = false
  }, 500)
  let clipboard = new Clipboard('#copyBtn');
  clipboard.on('success', e => {
    console.log(this, '复制成功!', 'success', e);
    clipboard.destroy()
  })
  clipboard.on('error', e => {
    console.log(this, '该浏览器不支持自动复制!', 'warning', e);
    clipboard.destroy()
  })
},

copy方法不能添加.stop等修饰符，所以如果有需求，我的解决方法是添加一个定时器开关，点复制，让开关关闭500ms，在父元素的时间中判断itemIsDisabled就行了。

   success事件中，需要注意this的指向问题。this测试不是指向vue实例

我是在这篇文章学的：https://blog.csdn.net/qq_41115965/article/details/104795358

标签：vue,clipboard,success,粘贴板,itemIsDisabled,Clipboard,复制,copy
来源： https://www.cnblogs.com/wuyufei/p/15774579.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。