原文链接:
Vue中配合clipboard.js实现点击按钮复制内容到剪切板-luozz
下载:npm install clipboard --save
引入(main.js):
import clipboard from 'clipboard'; //注册到vue原型上 Vue.prototype.clipboard = clipboard;
template:
<input type="text" id="success_form_input" readonly="readonly" v-model="link"/>
/*button上的这个ref需要命名一个,名字自己取,下面会讲解为什么*/
<button ref="copy" data-clipboard-action="copy" data-clipboard-target="#success_form_input" @click="copyLink">复制</button>
Events:
data() {
return {
copyBtn: null //存储初始化复制按钮事件
}
},
mounted() {
/*这里使用了刚开始注册到vue原型上的clipboard(使用注册到vue原型的插件的方法就是:this + 注册时命名名字)
*这里需要用到刚才给button命名的ref的名字,因为这是vue提供的获取DOM的方法,虽然可以通过引入jQuery来获取,但是不推荐这样做,具体原因可以看官方文档和网上论坛搜索
*这里是在挂载到DOM节点时将button按钮传入clipboard并存储起来,具体原因下面会有详述
*/
this.copyBtn = new this.clipboard(this.$refs.copy);
},
methods: {
copyLink() {
/*这是点击按钮触发的点击事件,关于clipboard的使用就不再赘述了,上面介绍时已经讲述过,并且使用方法在官方文档上有*/
let _this = this;
let clipboard = _this.copyBtn;
clipboard.on('success', function() {
_this.$message({ /*这是使用了element-UI的信息弹框*/
message: '复制成功!',
type: 'success'
});
});
clipboard.on('error', function() {
_this.$message({
message: '复制失败,请手动选择复制!',
type: 'error'
});
});
}
}
1、对Events的写法解惑及使用clipboard过程中的注意事项:
- 为什么要在mounted周期中把按钮先存储起来?
答:经过亲自测试,若在点击事件中再初始话,即把mounted中的内容放到copyLink函数中,那么第一次点击会无效,第二次及以后便能生效,这样肯定是不符合要求的,因此我想了这么一个办法来解决这么一个问题,当然不单单不是mounted周期,放在created和beforeMounted周期应该也是行的,虽然没有亲自测试,但是因为这两个周期已经能获取DOM了,应该是可以的。
2、使用过程中的注意事项
- 使用NPM安装完成之后记得在main.js中引入并注册到Vue原型上,名字可以自己取。
- 使用时通过this + 原型上命名名字来调用clipboard。
- 按钮通过ref的命名来取,就是this.$refs.xxx,不推荐使用jQuery来获取DOM。
- 关于clipboard复制按钮的要求请遵从官方文档要求,例如加上data-clipboard-action和data-clipboard-target等。