vue生成二维码并下载

根据url生成二维码，按照时间节点切换信息和二维码

1. 效果如下：
   

2. 首先安装组件

npm i qrcodejs2

3. 在页面上进行引用

import QRCode from 'qrcodejs2'

4. 使用方法

CreatCode(){
            this.hostUrl=BASE_URL;
            //	设置二维码的样式
            var qrcode = new QRCode(this.$refs.qrcode, {
                width:60,
                height:60,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
            var url=this.hostUrl+'接口'+'?参数='+参数 +'&参数='+ 参数
            //以百度为例：https://www.baidu.com/
            qrcode.makeCode("url");
        },

5. 突然又遇到一个问题，没有点击切换的时候二维码的清除不生效，添加的清除二维码还是会改变二维码的位置，就做了修改，添加了一句代码。在生成二维码之前先清空再生产

this.$refs.qrcode.innerHTML="";

6. 这个切换效果是做了一个时间轴线，按照点击事件进行切换

<div class="iconfont icon-yuandian"  @click="changeActive(index)" :class="{active: index == timeIndex}"></div>

7.下载二维码

//下载二维码
downloadE() {
     var canvasData = this.$refs.qrcode.getElementsByTagName('canvas')
     var a = document.createElement("a")
     var event = new MouseEvent("click") // 创建一个单击事件
     a.href = canvasData[0].toDataURL("image/png")
     a.download = "drcQrcode"
     a.dispatchEvent(event)// 触发a的单击事件
 },

因为上面的这个二维码不清晰，所以换了一种方法制作二维码

npm install vue-qr --save

//在页面引用并注册组件
import vueQr from 'vue-qr'

components: {
   vueQr
},

//使用，colors控制二维码颜色
<vue-qr :text="urls" :size="400" :margin="0" colorLight="#ffffff" :colorDark='colors'></vue-qr>

//根据标识码创建二维码,根据ewmzt的值判断状态颜色
        CreatCode(landCode,ewmzt){
            if(ewmzt=="1"){
                this.colors='red'
            }else if(ewmzt=="2")
            {
                this.colors='rgb(218, 160, 13)'
            }else{
                this.colors='green'
            }
            this.urls="";
        },

最后生成的二维码样式