vue中使用clipboard实现点击复制功能

1、在Vue中引入clipboard

npm install clipboard --save

2、在需要的组件中引入

import Clipboard from 'clipboard';

3、页面中使用

<view class="relation">
  <span>联系我们</span>
  <span id="copy" class="mlr">{{copyEmail}}</span>
  // :data-clipboard-text="copyEmail" 
  //     data-clipboard-text放置需要复制的内容
  //     copyEmail在data中定义
  // data-clipboard-action="copy"  操作方式为复制
  // data-clipboard-target="#copy"  复制的目标，指向#copy
  <a 
    class="copy-email" 
    :data-clipboard-text="copyEmail" 
    data-clipboard-action="copy" 
    data-clipboard-target="#copy" 
    @click="copy()">
    点击复制邮箱
  </a>
</view>

copy(){
  let that = this;
  let clipboard = new Clipboard(".copy-email");
  clipboard.on('success', e => {
    that.$message.success("复制成功！")
    clipboard.destroy()
  })
  clipboard.on('error', e => {
    that.$message.error("复制失败，请手动复制！")
    clipboard.destroy()
  })
},