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實例

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