vue项目实现一键复制功能
pc端和h5端方法
<div style="color: #2E8CF0;">{{ expressNo }}</div>
<div class="copy" @click="copyExpressNo">复制</div>
copyExpressNo() {
navigator.clipboard.writeText(this.expressNo).then(() => {
this.$toast({ message: '订单号复制成功' });
})
},
通用方法
ps：虽然官方说execCommand这个方法可能会被删除，但不得不说，试了各种各样的方法，它还是很好用的。
<div style="color: #2E8CF0;" id="expressNo">{{ expressNo }}</div>
<div class="copy" @click="copyExpressNo">复制</div>
copyExpressNo() {
let expressNo = document.getElementById('expressNo')
window.getSelection().selectAllChildren(expressNo)
document.execCommand('Copy')
this.$toast({ message: '订单号复制成功' });
}
复制成功效果
