VUE 实现复制内容到剪贴板功能

一、安装插件

npm install vue-clipboard2 --save

 

二、全局注入（main.js）

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

 

三、使用

 <div class="watermark">

        <div class="watermarkinfo">{{ orderDetail.extract_code }}</div>

        <el-button v-clipboard:copy="orderDetail.extract_code" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>

      </div>

// 复制成功时的回调函数
onCopy (e) {
   this.$message.success("内容已复制到剪切板！")
},
// 复制失败时的回调函数
onError (e) {
   this.$message.error("抱歉，复制失败！")
}