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

腰長腿卻短發表於2019-03-07
VueJS

專案需求

點選某個按鈕，將設定的目標內容(例如下載連結地址，電話號，微訊號)複製到剪下板，可以在電腦/手機上任何地方貼上

外掛選擇

  • clipboard.js:

Vue中配合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();  }
}複製程式碼


相關文章