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上。