1.vue-qr，先说一下特点：带可以设置logo图片、背景图片、背景颜色、尺寸、边距等。
使用方法：
1.npm install vue-qr --save
2.在你要生成二维码的组件里面 import VueQr from 'vue-qr'
3.在export default里面注册组件components:{VueQr},
4.在template里
template里面写结构如果要想二维码的星星密一点，改变dotScale的数值大小
5.在export default中
二维码的地址显示的值、跳转的地址logo:'static/img/logo.png'//中间logo的地址}}}
6.简单的生成了二维码，这个生成的是img的二维码，要想生成canvas的二维码，得安装awesome-qr.js, 但是这个稍微复杂一些需要兼容你的node版本，很可能会报错。这个几乎就满足你的需求了，所以就不用搞那么多麻烦事了
7.如果你想下载这个二维码，可以用html的 a标签的 download属性 具体实现方法如下：
7.1-1 先获取到img标签的src, let url = document.querySelector('#qrcode img').src
7.1-2 动态创建一个a标签 let a = document.createElement('a')
7.1-3 定义一个点击事件 let event = new MouseEvent('click')
7.1-4 设置下载图片的名称 a.download = “张三的二维码”//默认下载下面的文件格式为;张三的二维码.png
张三的二维码.png
7.1-5 让a标签的href = 图片的src a.href = url
7.1-5 让a标签的href = 图片的src a.href = url
7.1-6 利用合成函数，执行event点击下载事件 a.dispatchEvent(event)
源代码如下：
downloadImg(){
var oQrcode = document.querySelector('#qrcode img')
var url = oQrcode.src
var a = document.createElement('a')
var event = new MouseEvent('click')
// 下载图名字
a.download = '张三的二维码'
//url
a.href = url
//合成函数，执行下载
a.dispatchEvent(event)
}
7.API地址;https://github.com/Binaryify/vue-qr
2.vue-qriously，与vue-qr组件十分类似，唯一缺点就是不能设置中间的logo图标，所以说很尴尬。还不如直接用上面的vue-qr呢
不想写了，附上链接，很详细
https://blog.csdn.net/qq_32113629/article/details/80480985
网友评论