一、需求说明
在项目中 点击按钮 复制 某行文本是很常见的 应用场景，
在 Vue 项目中实现 复制功能 需要借助 vue-clipboard2 插件。
二、代码实现
1、安装 vue-clipboard2 依赖
（ 不行的话可以切换成淘宝镜像源 npm config set registry https://registry.npm.taobao.org ）文章来源：https://www.toymoban.com/news/detail-545674.html
npm install --save vue-clipboard2
2、在 main.js 文件中全局引入插件
示例代码如下：文章来源地址https://www.toymoban.com/news/detail-545674.html
import Vue from 'vue'
import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard)
3、在 vue 文件中使用
<template>
<div>
<el-button
@click="onCopy"
>复制</el-button
>
</div>
</template>
<script>
export default {
data() {
return {
text: "这是一段复制的文本",
};
},
methods: {
onCopy() {
this.$copyText(this.text).then(
e=>{
console.log('复制成功：', e);
},
e=>{
console.log('复制失败：', e);
}
)
}
}
};
</script>
到了这里，关于vue中实现复制内容到剪切板的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
