复制粘贴插件——clipboard.js的使用

官网：clipboardjs.com/

安装

npm install clipboard --save

demo示例

<template>
    <div>
        <button id="copyDom">点击复制{{copyData}}</button>
    </div>
</template>

<script>
import Clipboard from 'Clipboard';
export default {
    name: 'ClipboardDemo',
    data () {
        return {
            copyData: '这是要复制的数据'
        };
    },
    // 必须在mounted中初始化
    mounted () {
        this.initClipboard();
    },
    methods: {
        initClipboard () {
            let clipboard = new Clipboard('#copyDom', {
                text: function () {
                    return document.getElementById(copyDom).innerText;
                }
            });
            clipboard.on('success', function (e) {
                console.log('Action:', e.action);
                console.log('Text:', e.text);
                console.log('-- 复制成功 --');
                e.clearSelection();
            });
            clipboard.on('error', function (e) {
                console.log(e);
            });
        }
    }
};
</script>

<style scoped>

</style>

问题集合

1、clipboard和Fastclick冲突，导致点击两次才能复制。解决方案：加一个名为“needsclick”的类名

  <button id="copyDom" class="needsclick ">点击复制</button>

原文连接www.jianshu.com/p/171f966b8…