vue 二維碼長按保存和復制內容

效果圖：

 

二維碼用了 qrcode.vue

npm install qrcode.vue --save

　

復制內容用了 vue-clipboard2

npm install vue-clipboard2 --save

　　

二維碼相關：

            <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');

　　

復制粘貼功能：

 <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)
            })
        }