vue二维码插件

项目中会遇到二维码生成和下载

• 下包

npm install vue-qr --save

• 引包

import vueQr from "vue-qr";

• 注册组件

  components: {
    vueQr
  },

• 使用组件

<div>
      <div class="channelQrcode">
              <vue-qr :text="info.proxyInfoInternalCode" :size="200":margin="0"></vue-qr>
            </div>
            <el-button type="text" style="color:#67C23A;" @click="downloadImg()">下载</el-button>
          </div>

methods:{

// 下载渠道二维码图片
    downloadImg() {
      var oQrcode = document.querySelectorAll(".channelQrcode img");
      var url = oQrcode[0].src;
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      // 下载图名字
      a.download = 'qrcode';
      a.href = url;
      // 合成函数，执行下载
      a.dispatchEvent(event);
    },
}