vue2复制到剪贴板功能

插件：vue-clipboard2

【是一个很常用的插件，网上教程很多】

 

简单使用：

(1）引入

 

（2）页面代码

?

1 2 3 4 5 6 7 8 9 10 11

<div :class="$style.copyLine">           <div :class="$style.copyContent">邀请码: {{ code }}</div>           <div             v-clipboard:copy="code"             v-clipboard:success="firstCopySuccess"             v-clipboard:error="firstCopyError"             :class="$style.copyBtn"           >             复制           </div>         </div>

　　

其中v-clipboard:copy的内容就是待复制内容，点击当前div即可复制

 

?

1 2 3 4 5

data() {   return {     code: "231231231",   }; },

　　

code就是template中要复制的字段

 

?

1 2 3 4 5 6 7 8

methods: {     firstCopySuccess() {       this.$toast("已复制到剪贴板");     },     firstCopyError() {       this.$toast("复制失败");     }, }

　　

↑ 复制回调