vue項目中做點擊按鈕復制文本框內容


zeroclipboard是走的flash插件,手機瀏覽器是不支持的,所以不得不舍棄之,用clipboard,clipboard不需要flash就可以完成復制剪切等功能,而且可以兼容pc,移動端

首先要安裝:cnpm install clipboard --save 

然后引入包

引入:import Clipboard from 'clipboard';

這個人地方坑會報各種依賴丟失的錯,沒關系,用下面的方法可以拯救

項目:

.

代碼:

<span class="NetbarNumber">{{item.NetbarNumber}}</span>
<button ref="copy" class="lr back-confirm btn" :data-clipboard-text="item.NetbarNumber" @click="copy" id="copy_text">復制key</button>
函數:

復制代碼:

copy: function () {
var _this = this;
var clipboard = new Clipboard('#copy_text');

clipboard.on('success', e => {
alert("dd")
// 釋放內存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持復制
Message({
message: '該瀏覽器不支持自動復制',
type: 'warning'
});
// 釋放內存
clipboard.destroy()
})
}
最后的效果:

點擊“復制key”這個按鈕就會復制前面盒子里面的東西啦  

希望對你們有幫助啦 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM