1. 程式人生 > 實用技巧 >Vue實現點選複製文字內容(原生JS實現)

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",
      });
    },

由於程式碼註釋已經很詳細了,在這裡就不做過多贅述,希望能幫到大家!謝謝!