前端实现复制文字功能 Vue+ELement UI+vue-clipboard2

Vue+ELement UI+vue-clipboard2实现复制功能

1. 首先安装依赖

npm i vue-clipboard2 --save

2. 在main.js中进行引入

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard);

3. 直接进行使用

• v-clipboard:copy=“address” 指定复制的数据
• v-clipboard:success=“onCopy” 复制成功后调用的方法
• v-clipboard:error=“onError” 复制失败后调用的方法

 <div class="addressAndMessage">
   <p>
     收货地址: <el-input v-model="address" class="address" readonly></el-input>
  	 <img src="../../assets/zwt_img/u2685.svg" alt="" v-clipboard:copy="address" v-clipboard:success="onCopy" v-clipboard:error="onError">
   </p>
   <p>买家留言: <span>{{orderMessage}}</span></p>
 </div>

4. 将复制成功onCopy方法和复制失败onError方法写在methods下面

onCopy(e){ 　　 // 复制成功
  this.$message({
    message:'复制成功',
    type:'success'
  })
},
onError(e){　　 // 复制失败
  this.$message({
    message:'复制失败',
    type:'error'
  })
}

完成以上步骤，就能实现点击复制功能，希望能够帮助到你 ~