VUE 实现复制粘贴 clipboard

1、安装 npm install clipboard --save
2、引用 import Clipboard from ‘clipboard’
3、使用方法一

<el-button type="text" size="small" class="copyBtn" @click="copy($event)">复制</el-button>
// methods
copy(e) {
      const clipboard = new Clipboard(e.target, { text: () => '复制的内容' })
      clipboard.on('success', e => {
        this.$message({ type: 'success', message: '复制成功' })
        clipboard.destroy()         // 释放内存
      })
      clipboard.on('error', e => {
        this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
        clipboard.destroy()
      })
      clipboard.onClick(e)  // 事件绑定
    }

4、使用方法二

<template>
       <span>{{ code }}</span>
       <i
       id="tag-copy" <-- 作为选择器的标识使用用class也行 -->
       :data-clipboard-text="复制的内容"
       class="el-icon-document"   title="点击复制"
       @click="copy()"/>
</template>
// methods
copy() {
      const clipboard = new Clipboard("#tag-copy")
      // 或者不绑定 const clipboard = new Clipboard("#tag-copy", () => '复制的内容')
      clipboard.on('success', e => {
        this.$message({ type: 'success', message: '复制成功' })
        clipboard.destroy() // 释放内存
      })
      clipboard.on('error', e => {
        this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
        clipboard.destroy()
      })
    }