需求設定
- 點擊某個按鈕，將設置的目標內容(例如下載鏈接地址)複製到剪切板，可以在電腦上任何地方粘貼
- 不使用任何框架和使用Flash，以最小的代碼實現該功能，並能兼容所有主流瀏覽器
插件選擇
- clipboard.js:
- 官網鏈接地址：clipboard.js
- 引入方式：
- NPM方式：npm install clipboard --save
- 直接引入：下載源代碼以後將相關JS放在目錄下，之後引入：
- 使用方式(官方文檔例子)：
- HTML(target包括但不限於input)
- JS
var clipboard = new ClipboardJS('.btn');
//成功回調
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
//失敗回調
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
更多使用方式和功能請參考官方文檔，這裡只舉例一個實用且常用的功能！
兼容性：
正文開始了！！！，在Vue中咋用？
- Vue項目所使用的相關插件(這僅是本人使用到clipboard.js那個項目用到的，不全是必須的)：vue-router、vue-cli、es6-promise、axios、scss、element-ui、clipboard。
- 使用clipboard步驟介紹開始：
- 安裝：npm install clipboard --save
- 引入(main.js)：
import clipboard from 'clipboard'; //註冊到vue原型上 Vue.prototype.clipboard = clipboard;
- template：
/*button上的這個ref需要命名一個，名字自己取，下面會講解為什麼*/
- Events:
data() {
return {
copyBtn: null //存儲初始化複製按鈕事件
}
},
mounted() {
/*這裡使用了剛開始註冊到vue原型上的clipboard(使用註冊到vue原型的插件的方法就是：this + 註冊時命名名字)
*這裡需要用到剛才給button命名的ref的名字，因為這是vue提供的獲取DOM的方法，雖然可以通過引入jQuery來獲取，但是不推薦這樣做，具體原因可以看官方文檔和網上論壇搜索
*這裡是在掛載到DOM節點時將button按鈕傳入clipboard並存儲起來，具體原因下面會有詳述
*/
this.copyBtn = new this.clipboard(this.$refs.copy);
},
methods: {
copyLink() {
/*這是點擊按鈕觸發的點擊事件，關於clipboard的使用就不再贅述了，上面介紹時已經講述過，並且使用方法在官方文檔上有*/
let _this = this;
let clipboard = _this.copyBtn;
clipboard.on('success', function() {
_this.$message({ /*這是使用了element-UI的信息彈框*/
message: '複製成功！',
type: 'success'
});
});
clipboard.on('error', function() {
_this.$message({
message: '複製失敗，請手動選擇複製！',
type: 'error'
});
});
}
}
- 對Events的寫法解惑及使用clipboard過程中的注意事項：
- 為什麼要在mounted週期中把按鈕先存儲起來？
- 答：經過親自測試，若在點擊事件中再初始話，即把mounted中的內容放到copyLink函數中，那麼第一次點擊會無效，第二次及以後便能生效，這樣肯定是不符合要求的，因此我想了這麼一個辦法來解決這麼一個問題，當然不單單不是mounted週期，放在created和beforeMounted週期應該也是行的，雖然沒有親自測試，但是因為這兩個週期已經能獲取DOM了，應該是可以的。
- 使用過程中的注意事項
- 使用NPM安裝完成之後記得在main.js中引入並註冊到Vue原型上，名字可以自己取。
- 使用時通過this + 原型上命名名字來調用clipboard。
- 按鈕通過ref的命名來取，就是this.$refs.xxx,不推薦使用jQuery來獲取DOM。
- 關於clipboard複製按鈕的要求請遵從官方文檔要求，例如加上data-clipboard-action和data-clipboard-target等。
使用過程中若有任何疑問，歡迎留言詢問！^_^^_^ 不足之處，歡迎各位批評指正！
分享到:
