Vue實現點選複製文字內容(原生JS實現)
阿新 • • 發佈:2020-10-29
需求:
實現點選訂單編號複製內容
實現步驟:
這裡我是在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", }); },
由於程式碼註釋已經很詳細了,在這裡就不做過多贅述,希望能幫到大家!謝謝!