自助开发微信小程序_vue 二维码长按保存和复制内

2021-01-05 10:49 admin
vue 二维码长按保存和复制内容操作       这篇文章主要介绍了vue 二维码长按保存和复制内容操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

效果图:

二维码用了 qrcode.vue

npm install qrcode.vue --save

复制内容用了 vue-clipboard2

npm install vue-clipboard2 --save

1.二维码保存功能:

 div 
 qrcode-vue
 :size="qrcodeSize"
 :value="shareUrl"
 id="picture"
 /qrcode-vue 
 /div 
 div 
 长按保存至相册
 img :src="qrcodeImgSrc" / 
 /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 
 span {{shareUrl}} /span 
 span @click="doCopy" 复制 /span 
 /div 

2.页面引入并使用

利用 img src="" 标签,实现二维码图片功能。然后长按保存即可。

 template 
 div 
 canvas id="canvas" /canvas 
 img :src="imgUrl"/ 
 p 长按保存二维码图片 /p 
 /div 
 /template 
import QRCode from 'qrcode'
export default {
 data() {
 return {
 codes: '',
 imgUrl:''
 components: {
 QRCode: QRCode
 methods: {
 useqrcode() {//生成二维码
 let canvas = document.getElementById('canvas')
 let url="/保存图片
 //保存图片
 saveImg(){
 let myCanvas = document.getElementsByTagName('canvas');
 this.imgUrl=myCanvas[0].toDataURL('image/png') 
 mounted() {
 this.useqrcode(); //生成二维码 
 /script 

以上这篇vue 二维码长按保存和复制内容操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。