vue使用clipboard复制的插件以及踩坑记录
//安装就不用说了把npm install clipboard使用方法://template 看过很多资料 但是在vue中操作DOM不建议 我们尽量采用ref的方式<spanclass="tag"ref="copy"@click="copy">{{newPassword}}</span>//methodscopy() {let copy = this.$refs.copyl
·
//安装就不用说了把
npm install clipboard
使用方法:
//template 看过很多资料 但是在vue中操作DOM不建议 我们尽量采用ref的方式
<span
class="tag"
ref="copy"
@click="copy"
>{{newPassword}}</span>
//methods
copy() {
let copy = this.$refs.copy
let clipboard = new Clipboard(copy, {
text: (trigger) => {
return this.password
}
});
console.log('2');
clipboard.on("success", (e) => {
console.log('1');
this.$message({message: '复制成功', showClose: true, type: 'success'})
// 释放内存
clipboard.destroy();
});
clipboard.on("error", (e) => {
this.$message({message: '复制失败,', showClose: true, type: 'error'})
clipboard.destroy();
});
},
——————————分割线(坑处)—————————
针对于第一次点击无效,第二次点击生效的问题解决如下:
经过自己摸索,出来了两种办法。
原因: 先看图
注意:在Vue文件中引入这个插件,我们只是在点击调用方法的时候实例化了这个插件,所以第一次点击没有作用
第一:在mounted挂载这个方法,加载页面完毕就已经创建了实例,解决了点击的问题(推荐)
第二:在mounted中直接挂载实例,不需要自己在方法里像上面的图里一样创建实例,加载页面完毕之后就创建一个实例,也解决了这个问题
mounted(){
this.clipboard = new Clipboard(this.$refs.copy, {
text: (trigger) => {
return this.password
}
});
},
copy() {
this.clipboard.on("success", (e) => {
this.$message({message: '复制成功', showClose: true, type: 'success'})
});
this.clipboard.on("error", (e) => {
this.$message({message: '复制失败,', showClose: true, type: 'error'})
this.clipboard.destroy();
});
}
更多推荐
已为社区贡献1条内容
所有评论(0)