效果图:
二维码用了 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)
})
}