如果我們要實作 「將資料複製到剪貼簿」的操作，我們有三種選擇，分別為 :

1. Document.execCommand()
2. Clipboard API
3. ClipboardEvent 的 copy、paste 事件

這裡主要會分別介紹Document.execCommand()和 Clipboard API

複製指定元素文字

Document.execCommand()

這個語法最大的缺點，就是 已經過時啦 !
如果去找MDN對這段語法的解說，就可以得到以下資訊 :

這個功能已經過時了。儘管它在某些瀏覽器中仍然可以工作，
但它的使用是不鼓勵的，因為它可能在任何時候被刪除。盡量避免使用它。

那麼，我們還有需要用這段語法的必要嗎?之所以還有需要它的理由，在於 支援度

Document.execCommand() 基本上支援所有主流瀏覽器，所以偶爾還是必須使用一下

<!-- 事先把這段文字設置透明並藏起來 -->
<p ref="cuponCode" class="position-absolute" :class="{'d-none':isCopied}"
style="color: transparent">2022si-yueh</p>

<button @click.once="copyCuponCode">馬上領取</button>

// 這裡利用isCopied來操作，達成按鈕點擊一次之後，優惠碼會自動消失(display:none)，
data(){
  return{
    isCopied:false
  }
},
  methods: {
    copyCuponCode () {
      this.$StatusMsg(true, '複製', '您已成功複製優惠碼!')
      // 建立 Range 物件
      const range = document.createRange()
      range.selectNode(this.$refs.cuponCode)
      // 取得 Selection 物件
      const selection = window.getSelection()
      // 先清空當前選取範圍
      selection.removeAllRanges()
      // 加入 Range
      selection.addRange(range)
      document.execCommand('copy') // 執行瀏覽器複製命令
      this.isCopied = true
    }
  },

Clipboard API

而為了解決 document.execCommand() 被淘汰的問題，Clipboard API也就因應而生拉~

至於使用情境，我自己在作品集中是拿來複製優惠券碼和訂單編號XD

readText()：讀取剪貼簿純文字內容。
writeText()：對剪貼簿寫入純文字內容。
read()：讀取剪貼簿複合內容。
write()：對剪貼簿寫入複合內容。

由於Clipboard API是非同步的promise語法，所以使用這些方法皆會回傳結果值。 如果我們需要在複製過後跳出提示，可以這麼寫 :

copyCuponCode (text) {
  navigator.clipboard.writeText(text)
    .then(() => {
      this.$StatusMsg(true, '複製', '您已成功複製優惠碼!')
    })
}

這樣就完成啦~~

參考資料

JavaScript 剪貼簿複製操作
JavaScript 實現複製文字功能