vue中粘贴板clipboard的使用方法

一、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实例

vue中粘贴板clipboard的使用方法的相关教程结束。