vue项目中使用vue-qr前端生成二维码

太方便了

html 部分 logoSrc是生成二维码中间的小logo text是二维码内容， @click="downloadQR() 事件直接保存二维码图片到本地

<template>
  <vue-qr ref="qr" logoSrc="" :text="qrCodeUrl" :size="200"></vue-qr>
  <el-button type="primary" size="small" @click="downloadQR()">保存</el-button>
  </template>

js部分

<script>
import vueQr from 'vue-qr';

export default {
    components: {
        vueQr,
    },
    data() {
        return {
        qrCodeUrl:"www.baidu.com"
        }
    },
    methods: {
        downloadQR() {
           let a = document.createElement('a');
           // 下载图名字
           a.download = "qrcode";
           //url
           a.href = this.$refs.qr.$el.src;
           //合成函数，执行下载
           a.dispatchEvent(new MouseEvent('click'))
       },
   }
}
</script>