Vue+ELement UI+vue-clipboard2实现复制功能
- 首先安装依赖
npm i vue-clipboard2 --save
- 在main.js中进行引入
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard);
- 直接进行使用
- 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>
- 将复制成功onCopy方法和复制失败onError方法写在methods下面
onCopy(e){ // 复制成功
this.$message({
message:'复制成功',
type:'success'
})
},
onError(e){ // 复制失败
this.$message({
message:'复制失败',
type:'error'
})
}
完成以上步骤,就能实现点击复制功能,希望能够帮助到你 ~