zoukankan      html  css  js  c++  java
  • vue 二维码长按保存和复制内容

    效果图:

    二维码用了 qrcode.vue
    npm install qrcode.vue --save
    

     

    复制内容用了 vue-clipboard2
    npm install vue-clipboard2 --save
    

      

    1.二维码保存功能:
                <div class="qrcode">
                        <qrcode-vue
                            :size="qrcodeSize"
                            :value="shareUrl"
                            id="picture"
                        ></qrcode-vue>
                    </div>
                    <div class="btn">
                        长按保存至相册
                        <img :src="qrcodeImgSrc" class="qrcode-img"/>
                    </div>        
    

      


    注意,qrcode.vue渲染的是一个canvas,canvas可以通过toDataURL方法转换为png图片。
    长按保存功能是在长按上加一张图片,设置这张图片的opacity为0即可。
    模拟a标签点击下载的方法在微信上有问题。
    let myCanvas = document.getElementById('picture').getElementsByTagName('canvas')[0];
    this.qrcodeImgSrc = myCanvas.toDataURL('image/png');
    

      


    2.点击按钮,复制粘贴功能:
     <div class="copy">
                        <span>{{shareUrl}}</span>
                        <span @click="doCopy">复制</span>
      </div>
    

      

     doCopy() {
                this.$copyText(this.shareUrl).then(function (e) {
                    alert('Copied')
                    console.log(e)
                }, function (e) {
                    alert('Can not copy')
                    console.log(e)
                })
            }
    

      

  • 相关阅读:
    多线程编程核心技术(五)死锁
    SELinux详细配置
    Linux实现RAID
    iSCSi的基本配置
    文本超出省略号之前后省略号实现
    对象冻结
    条件判断的优美写法
    使用VConsole
    重绘和重排(回流)
    移动端rem布局
  • 原文地址:https://www.cnblogs.com/xiaochongchong/p/11089995.html
Copyright © 2011-2022 走看看