【vue】点击复制到剪贴板的方法( clipboard )

需求描述：点击复制可以把店铺链接复制到剪贴板上

 

解决方法：

使用clipboard 插件

 

安装

npm install clipboard --save

 

设置

在main.js 中引入， 当然我们也可以在用到的.vue中映入，因为不止在一个地方中用到了拷贝文字

import clipboard from 'clipboard';//注册到vue原型上Vue.prototype.clipboard = clipboard;

 

 

在需要拷贝文字的文件里面

<template>

    <div class="qrCodeContainer">

        <div class="linkContent">

            <a>店铺链接：<span id="qrcode_url">{{qrcode_url}}</span></a>

            <button id='copy' data-clipboard-target='#qrcode_url' @click="copyLink">复制</button>

        </div>

    </div>

</template>

 

 

<script>

import { Toast } from 'mint-ui';

export default {

    data() {

        return {

            qrcode_url: 'https://www.baidu.com/'

        }

    },

    methods: {

        copyLink() {

            const _this = this;

            const clipboard = new this.Clipboard('#copy');

            clipboard.on('success', () => {

                Toast({

                    message: '复制成功',

                    duration: 1000

                });

            })

            clipboard.on('error', () => {

                Toast({

                    message: '复制失败',

                    duration: 1000

                });

            })

            console.log(clipboard)

        }

    }

}

</script>