在vue中使用clipboard.js,需要点击两次才能复制成功的问题

mac2024-04-14  39

解决方案,在updated中创建Clipboard实例,以确保拿到的是最新的DOM节点内容。

template代码:

<template> <div> <span id="tag-read">{{data}}</span> <button @click="copy()" data-clipboard-target="#tag-read" ref="copy">复制</button> </div> </template>

js代码:

data(){ return{ clipboard:null, data:'复制的内容' } }, methods:{ copy() { this.clipboard.on('success', function(e) { console.log('复制成功') }); this.clipboard.on('error', function(e) { console.log('复制失败') }); }, updated(){ let text = '' this.clipboard = new Clipboard(this.$refs.copy,{ text: function() { return text; } }); }
最新回复(0)