vue vue-qr组件使用以及循环下载时的实现

vue-qr安装

命令安装

npm install vue-qr --save

vue-qr链接
普通使用

<vue-qr :text="生成链接" :logoScale="60" :size="200" :margin="0"></vue-qr>

增加中心logo

<vue-qr :text="生成链接" :logoScale="60" :logoSrc="生成链接logo" :size="200" :margin="0"></vue-qr>

海报下载

// 官方下载
    downloadImg() {
      this.isDisable = '';
      var oQrcode = document.querySelector('#qrcode img')
      var url = oQrcode.src
      var a = document.createElement('a')
      var event = new MouseEvent('click')
      a.download = '我的的二维码'
      a.href = url
      //合成函数，执行下载 
      a.dispatchEvent(event);
      setTimeout(() => {
        this.isDisable = false;
      }, 1000)
    },

循环展示海报,下载海报信息

//template头部
<template>
	<div class="uploader2wm" :id="gernerateId(index)">
        <vue-qr v-if="item.link" :text="循环链接" :logoScale="60" :logoSrc="item.logo" :size="200" :margin="0"></vue-qr>
    </div>
</template>
//js展示
gernerateId(index){
   return "qrcode" + index;
}
// 下载
downloadImg(index, name) {
      console.log("index", index)
      this.isDisable = '';
      let downImg = ('#'+'qrcode'+index+' '+'img').toString()
      console.log('downImg', downImg)
      var oQrcode = document.querySelector(downImg)
      var url = oQrcode.src
      var a = document.createElement('a')
      var event = new MouseEvent('click')
      // a.download = '我的的二维码'
      a.download = `${name}`+'的二维码'
      a.href = url
      //合成函数，执行下载 
      a.dispatchEvent(event);
      setTimeout(() => {
        this.isDisable = false;
      }, 1000)
},