前言
如果需要原生JS实现该功能,可参考这篇文章。
如果您 Vue
项目需要一键复制内容到系统剪贴板功能(且兼容性强的话),vue-clipboard2
是个非常好的插件。
一、安装插件
在项目根目录,打开终端执行以下命令:
npm install --save vue-clipboard2
二、引入插件
打开项目 main.js
文件,添加以下代码:
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
如下图所示:
三、使用方法
如果想了解更多,请参考插件官网:https://www.npmjs.com/package/vue-clipboard2。
方法一:
<template>
<div>
<button
v-clipboard:copy="qq"
v-clipboard:success="onCopy"
v-clipboard:error="onError">复制QQ
</button>
</div>
</template>
<script>
export default {
data() {
return {
qq: '599729022'
}
},
methods: {
/**
* 复制成功
* @param {Object} e - 剪贴板信息
*/
onCopy: function (e) {
alert('复制成功: ' + e.text)
},
one rror: function (e) {
alert('复制失败')
}
}
}
</script>
方法二:
<template>
<div>
<button type="button" @click="doCopy">复制QQ</button>
</div>
</template>
<script>
export default {
data() {
return {
qq: '123456'
}
},
methods: {
doCopy: function () {
this.$copyText(this.qq).then(function (e) {
alert('复制成功')
console.log(e)
}, function (e) {
alert('复制失败')
console.log(e)
})
}
}
}
</script>