Vue使用vue-qr组件生成二维码&&实现二维码下载功能

效果图：(不涂鸦，图片违规)

 

1、安装 vue-qr组件：

yarn vue-qr --save
或者
npm install vue-qr --save

 2、页面挂载使用：（也可以在main.js全局挂载）

  !!!单页面引入:

import vueQr from 'vue-qr';
export default {
	components: {
		vueQr
	},
}

!!!全局挂载引入:

import VueQr from 'vue-qr'
new Vue({
    components: {VueQr}
})

3、实现点击下载方法：

methods: {
	download(sourceName) { //下载
        //const iconUrl = this.$refs['qrCode' + sourceName].$el.src //2021年做项目写
		const iconUrl = this.$refs['qrCode' + sourceName][0].$el.src //2023年修改
		const a = document.createElement('a') //自定义a标签
		const event = new MouseEvent('click') //自定义鼠标点击事件
		a.download = sourceName
		a.href = iconUrl
		a.dispatchEvent(event) //触发自定义事件
	},
}

4、案例代码：