Vue生成二维码_生成二维码插件

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

首先安装一下面这个插件

 cnpm install vue-qr -S

接下来在需要生产并下载二维码的页面引入

import VueQr from 'vue-qr'

并在components中注册为组件

components: {
    VueQr // 二维码组件
},
data() {
	return {
	        config: { // 二维码配置
                logo: '',
                value: ''
            }
	}
},
methods: {
	// 点击触发下载二维码
	downQRImg (data, type) {
	    this.config = {
	        logo: '二维码中心logo',
	        value: '二维码内容'
	    }
	    let timer = setInterval(() => {	// 做一个定时器防止二维码未生成时候就下载而获取不到二维码地址
	        if (this.$refs.Qrcode.$el.src) {
	            const iconUrl = this.$refs.Qrcode.$el.src	// 二维码地址
	            let a = document.createElement('a')
	            let event = new MouseEvent('click')
	            a.download = data.TenantName	// 二维码名称
	            a.href = iconUrl
	            a.dispatchEvent(event)
	            clearInterval(timer)
	            this.$message.success('二维码已下载')
	            this.config = {
	                logo: '',
	                value: ''
	            }
	        }
	    }, 100)
	},
}

在html代码里面加入以下代码

<vue-qr
    id="qrcodeimg"
    ref="Qrcode"
    style="display:none"
    :logo-src="config.logo"
    :text="config.value"
    :size="200"
    :margin="0"
/>