Vue中配合clipboard.js實現點擊按鈕複製內容

項目需求

點擊某個按鈕，將設置的目標內容(例以下載連接地址，電話號，微信號)複製到剪切板，能夠在電腦/手機上任何地方粘貼

插件選擇

• clipboard.js:

1. 官方地址：clipboardjs.com

2. 引入方式：

• NPM 方式：npm install clipboard --save

3. 使用方式(官方文檔例子)：

• HTML(target包括但不限於input)

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>複製代碼

• 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 中使用

1. 安裝：

npm install clipboard --save複製代碼

2.  引入：

import Clipboard from 'clipboard';複製代碼

3. template: 

<button   ref="copyButton"   :data-clipboard-text="copyNumber"></button>複製代碼

若是不想顯示 input 輸入框，可把須要複製的內容使用 data-clipboard-text 掛載到按鈕上

<input id="copyInput" readonly v-module="copyNumber"><button   ref="copyButton"   data-clipboard-target="copyInput"></button>複製代碼

若是須要顯示 input 輸入框，能夠在 data-clipboard-target 填寫輸入框的 id 去複製輸入框的內容

4. js

export default {  data() {    return {      copyNumber: '18404960408'    };  },
methods: {    // 初始化複製插件    initClipboard() {      const clipboard = new Clipboard(this.$refs.copyButton);      clipboard.on('success', (e) => {        console.log('複製成功，請在微信粘貼添加')      });      clipboard.on('error', (e) => {        console.log('複製失敗，請再次嘗試')      });    }  },  mounted() {    this.initClipboard();  }
}複製代碼