clipboard在Vue项目中点击两次可以进行复制,解决。

// 使用环境: Vue-cli3  复制剪切板插件:clipboard
// 安装: npm install clipboard -save 
<p 
	data-clipboard-action="copy"
	:id="'copy-'+ elindex" 
	class="class-list-item__title"  
	:data-clipboard-text="classInfo.Name" 
	@mouseenter="copy('#copy-'+ elindex)" 
	@click="copy('#copy-'+ elindex)"  >{{classInfo.Name}}</p>
// data-clipboard-action: 操作的动作 copy 复制
// data-clipboard-text 需要复制的内容

// 点击事件
copy(el) {
    this.clipboard = new ClipboardJS(this.tools.$jQuery(el));
     this.clipboard.on('success', e => {
         this.$message({
             message: '复制成功',
             type: 'success'
         });
         this.clipboard.destroy();
     });
     this.clipboard.on('error', e => {
         this.$message(e);
         e.clearSelection();
         this.clipboard.destroy();
     });
 },
// 处理点击两次复制的方式,借助mouseenter实现,当鼠标移入的时候执行一次,在接下来的点击事件中就可以正常复制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值