关于一个页面多处复制功能使用Clipboard插件步骤以及注意事项

项目：技术栈vue单页应用

安装Clipboard插件（我安装的版本^2.0.6）

npm install clipboard --save-dev

在使用复制的页面引入插件

import Clipboard from 'clipboard'

给页面中html绑定点击事件

<div class="btn-right copy0" @click="copy('.copy0')">第一处复制功能</div>
<div class="btn-right copy1" @click="copy('.copy1')">第二处复制功能</div>
<div class="btn-right copy2" @click="copy('.copy2')">第三处复制功能</div>

接下来是关键部分，data的初始化数据以及methods中的绑定事件

data () {
    return {
        copyboard: ''
    };
},

methods: {
    copy (copyId) {
          if (Clipboard.isSupported()) { // 检测浏览器是否支持复制功能Clipboard.isSupported()
              this.copyboard && this.copyboard.listener.destroy()
              this.copyboard = new Clipboard(copyId, {
                  text: () => {
                      return '要复制的内容'
                  }
              })
              this.copyboard.on('success', (e) => {
                 console.log('复制链接成功')
              })
              this.copyboard.on('error', (e) => {
                  console.log('复制链接失败')
              })
          }
      }
  }

按照以上写法即可实现，关键点在于copyboard的destroy方法，每次实例化前必须销毁。