clipboard在vue中的使用的方法示例

npm install --save clipboard

<template>
 <span>{{ code }}</span>
 <i
 class="el-icon-document"
 title="点击复制"
 @click="copyActiveCode($event,code )"/>
</template>
// methods
copyActiveCode(e, text) {
 const clipboard = new Clipboard(e.target, { text: () => text })
 clipboard.on('success', e => {
 this.$message({ type: 'success', message: '复制成功' })
 // 释放内存
 clipboard.off('error')
 clipboard.off('success')
 clipboard.destroy()
 })
 clipboard.on('error', e => {
 // 不支持复制
 this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
 // 释放内存
 clipboard.off('error')
 clipboard.off('success')
 clipboard.destroy()
 })
 clipboard.onClick(e)
 }

<template>
 <span>{{ code }}</span>
 <i
 id="tag-copy" <-- 作为选择器的标识使用用class也行 -->
 :data-clipboard-text="code" <-- 这里放要复制的内容 -->
 class="el-icon-document"
 title="点击复制"
 @click="copyActiveCode($event,code)"/>
</template>
// methods
copyActiveCode() {
 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()
 })
 }