clipboard java_clipboard 在 vue 中的使用

简介

页面中用 clipboard 可以进行复制粘贴，clipboard能将内容直接写入剪切板

安装

npm install --save clipboard

使用方法一

{{ code }}

class="el-icon-document"

title="点击复制"

@click="copyActiveCode($event,code )"/>

// 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)

}

使用方法二

{{ code }}

id="tag-copy"

:data-clipboard-text="code"

class="el-icon-document"

title="点击复制"

@click="copyActiveCode($event,code)"/>

// 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()

})

}