Clipboard

demo示例

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

<script>
import Clipboard from 'Clipboard';
export default {
    name: 'ClipboardDemo',
    data () {
        return {
            copyData: '这是要复制的数据'
        };
    },
    // 必须在mounted中初始化
    mounted () {
        this.initCopyDom();
    },
    methods: {
        initClipboard (copyDom) {
            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);
            });
        },
        // 点击复制
        initCopyDom () {
            this.initClipboard('#copyDom');
        },
    }
};
</script>

<style scoped>

</style>

问题集合

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

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