码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-17 18:37:25      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:vue   console   efault   turn   targe   inf   nta   原型   qrcode   

需求描述:点击复制可以把店铺链接复制到剪贴板上
技术图片

 

 

 
解决方法:
使用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>
 
 
 

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

标签:vue   console   efault   turn   targe   inf   nta   原型   qrcode   

原文地址:https://www.cnblogs.com/guanpingping/p/12055733.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!