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: '订单号复制成功' });
}

复制成功效果