Vue實現點擊復制文本內容(原生JS實現)

需求：

實現點擊訂單編號復制內容

實現步驟：

這里我是在element 的table組件里實現的步驟，僅供參考，實際上實現思路都大同小異

首先在需要點擊的地方，添加點擊事件

<div class="orderNumber" @click="copyOrderNumber(scope.row.orderNumber)">
  <span>{{ scope.row.orderNumber }}</span>
  <i class="el-icon-document-copy copyIcon"></i>
</div>

定義我們的點擊事件

// 復制訂單編號
copyOrderNumber(OrderNumber) {
    //調用copy函數
   this.copy(OrderNumber);
},

關鍵點來了

// 復制功能
    copy(data) {
      // 存儲傳遞過來的數據
      let OrderNumber = data;
      // 創建一個input 元素
      // createElement() 方法通過指定名稱創建一個元素
      let newInput = document.createElement("input");
      // 講存儲的數據賦值給input的value值
      newInput.value = OrderNumber;
      // appendChild() 方法向節點添加最后一個子節點。
      document.body.appendChild(newInput);
      // 選中input元素中的文本
      // select() 方法用於選擇該元素中的文本。
      newInput.select();
      // 執行瀏覽器復制命令
      //  execCommand方法是執行一個對當前文檔，當前選擇或者給出范圍的命令
      document.execCommand("Copy");
      // 清空輸入框
      newInput.remove();
      // 下面是element的彈窗 不需要的自行刪除就好
      this.$message({
        message: "復制成功",
        type: "success",
      });
    },

由於代碼注釋已經很詳細了，在這里就不做過多贅述，希望能幫到大家！謝謝！