vue下實現複製功能
阿新 • • 發佈:2019-01-30
一、說明:
vue下想要實現複製功能有很多種方法,比如vue-clipboard2等。
但是如果你不想使用外掛,我們也可以利用document.execCommand來實現此功能。
二、簡介:
當一個HTML文件切換到設計模式 designMode時,文件物件暴露 execCommand 方法,該方法允許執行命令來操縱可編輯區域的內容。
三、使用
methods: { CopyUrl(){ let url = document.querySelector('#copyObj'); url.select(); // 選擇物件 document.execCommand("Copy"); }, },
方法如上,我們需要複製的目標,比如以下的input標籤
<input type="text" value="https://blog.csdn.net/Tomhs3000" id="copyObj">
此處input的value也可以直接用v-model繫結資料
四、注意事項
需要注意的是:
1、input 不可以新增 disabled 屬性;
2、input的 width 和 height 不能為0;
3、input框不能有hidden屬性;
但是可以設定opacity。