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();  }
}复制代码