// 使用环境: 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实现,当鼠标移入的时候执行一次,在接下来的点击事件中就可以正常复制。
clipboard在Vue项目中点击两次可以进行复制,解决。
最新推荐文章于 2024-09-13 21:59:39 发布