vue中实现复制粘贴功能

最近在项目中遇到点击按钮复制链接功能，将其总结如下：

安 装 color{#ff8247}{安装} 安装

npm install vue-clipboard2 --save

引 入 color{#ff8218}{引入} 引入

在main.js中引入以下代码：

import VueClipboard from vue-clipboard2
Vue.use(VueClipboard)

使 用 color{#ff6347}{使用} 使用

template中 <v-btn class="btn_style" text v-clipboard:copy="domain+node.path" v-clipboard:success="onCopy" v-clipboard:error="onError"> Share </v-btn> <!-- 复制链接弹框 --> <v-dialog v-model="show" max-width="290"> <v-card> <v-card-title>{ {this.tipInfo}}</v-card-title> <v-card-actions> <v-spacer></v-spacer> <v-btn color="info" text @click="show = false"> 确定 </v-btn> </v-card-actions> </v-card> </v-dialog> 注意：我使用的是vuetify组件，可以将第一行代码换为以下代码： <div v-clipboard:copy="domain+node.path" v-clipboard:success="onCopy" v-clipboard:error="onError">share</div> 解析： v-clipboard:copy：是要复制的链接。 v-clipboard:success="onCopy"：是复制成功的方法。 v-clipboard:error="onError"：是复制失败的方法。 methods中 methods: { // 复制成功 onCopy() { this.show = true; this.tipInfo = "链接复制成功"; }, // 复制失败 onError() { this.show = false; this.tipInfo = "链接复制失败"; } }

结 果 color{#ff6347}{结果} 结果