Liverpoolfc.tv: clipboardjs.com/

The installation

npm install clipboard --save
Copy the code

The demo sample

<template>
    <div>
        <button id="copyDom">Click copy {{copyData}}</button>
    </div>
</template>

<script>
import Clipboard from 'Clipboard';
export default {
    name: 'ClipboardDemo',
    data () {
        return {
            copyData: 'This is the data to copy.'
        };
    },
    // Must be initialized in 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('-- copied successfully --');
                e.clearSelection();
            });
            clipboard.on('error'.function (e) {
                console.log(e); }); }}};</script>

<style scoped>

</style>

Copy the code

Problem set

1, Clipboard and Fastclick conflict, resulting in two clicks to copy. Solution: Add a class name called “needsclick”

  <button id="copyDom" class="needsclick "> Click copy </button>Copy the code

The original connection www.jianshu.com/p/171f966b8…