vue生成二维码插件_vue 二维码生成插件

vue3生成二维码插件，亲测好用！！！qrcode.vue 的官方链接地址

qrcode.vue/README-zh_cn.md at main · scopewu/qrcode.vue · GitHub

1.安装 npm install --save qrcode.vue # yarn add qrcode.vue
2.引入 import QrcodeVue from ‘qrcode.vue’
3.使用

 <qrcode-vue :value="value" :size="size" level="H" />
 
 const value=ref('http://www.baidu.com/') 

vue2生成二维码插件

第一步，先安装 vue-qr 插件

npm install vue-qr --save
第二步，在想要生成vueQr 的Vue页面引入组件

import vueQr from 'vue-qr'
第三步，在components中引入VueQr组件

components: { VueQr }
最后就在在html上引用

<VueQr :margin='8' :size='280' :whiteMargin="true" :logoMargin="3" :logoCornerRadius="20" :text='codeText'> </VueQr>
text 二维码内容

size 二维码宽高大小，因为是正方形，所以设一个参数即可

margin 默认边距20px，不喜欢的话自己设为0

colorDark 实点的颜色，注意要和colorLight一起设置才有效

colorLight 空白的颜色，注意要和colorDark一起设置才有效

bgSrc 嵌入背景图地址

logoSrc 二维码中间的图，这个是好东西，设置一下显得专业点

logoScale 中间图的尺寸，不要设太大，太大会导致扫码失败的

dotScale 那些小点点的大小，不建议

官网api查看https://www.npmjs.com/package/vue-qr

下载生成二维码

先获取该图片元素，再绘图，再转为data64格式，再赋值给a标签，再下载，再释放

let node=e.target.parentElement.previousElementSibling
console.log(e.target.childNodes);
const height = "228"
const width = "228"
let canvas = document.createElement("canvas");
canvas.height = height;
canvas.width = width;
console.log(document.getElementById('qri'));
let i=document.getElementById('qri');
canvas.getContext("2d").drawImage(node,0,0,width, height);
const dataurl = canvas.toDataURL("image/jpeg");
const link = document.createElement("a");
link.href = dataurl;
console.log(dataurl);
link.download ='1.jpg'
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
canvas = null;