vue使用vue-clipboard2

準備

npm i vue-clipboard2

引入

main.js

import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true
Vue.use(VueClipboard)

點擊div複製相應內容

<template>
  <div  v-clipboard:copy="code"
            v-clipboard:success="onCopy"
            v-clipboard:error="onCopyError">點擊複製</div>
</template>
...
  data:function(){
     return{
       code:'我是複製的內容'
     }
  }
...
methods:{
	 onCopy(e){
            alert( '複製內容 '+ e.text+'成功！');
          },
          onCopyError(){
            alert( '您的手機系統不支持自動複製，請手動複製！');
          },
}

遇見的錯：

vue-clipboard2複製成功，但是粘貼沒有內容

我遇到問題的原因：複製粘貼的邏輯寫在了img上，錯誤代碼如下：

<img v-clipboard:copy="code"
            v-clipboard:success="onCopy"
            v-clipboard:error="onCopyError" src="xxxx" alt=" "/>

解決方式：
用div將img包起來，粘貼邏輯寫在div上。

<div v-clipboard:copy="code"
            v-clipboard:success="onCopy"
            v-clipboard:error="onCopyError">
<img src="xxxx" alt=" "/>
</div>

使用注意：
這個複製的觸發不要寫在圖片img上，如果有需要點擊圖片複製的需求，請用div包起來，複製邏輯寫在div上。