clipboard介绍
clipboard.js的出现很好的解决了这个问题,它不但体积小,使用也非常的方便几行代码即可完成,可以实现纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。
项目用到了,我这边就记录一下使用的方法
安装
npm install --save clipboard
引入
import ClipboardJS from 'clipboard';
使用方法一
<template>
<span>{{ code }}</span>
<el-button @click="copyActiveCode($event,code )"> 点击复制</el-button>
</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>{{ codecontant }}</span>
<i
id="tag-copy" <-- 作为选择器的标识使用用class也行 -->
:data-clipboard-text="codecontant" <-- 这里放要复制的内容 -->
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()
})
}
我使用的是第二种方法,感觉还挺方便的,暂时没有遇到什么BUG