vue生成二维码并实现扫码跳转操作

1.引入qrcodejs2

        npm install qrcodejs2

2.在vue组件里引入qrcodejs2

        import QRCode from "qrcodejs2";

3.页面代码

 （1）html,(traceData字段为列表数组，)       

 <div class="product" v-for="item in traceData" :key="item.id">

                  <div class="productImg">

                    <img :src="item.img" alt="" />

                  </div>

                  <h4>{{ item.name }}</h4>

                  <div class="productT ell" :title="item.batch">

                    批次：{{ item.demo2}}

                  </div>

                  <div class="productT">

                    <span>二维码：</span>

                    <span class="iconfont icon-erweima"  @click="lookCode(item)"></span>

                </div>

         </div>

//点击生成弹窗,弹出二维码

<el-dialog

              :modal="false"

              title="二维码"

              :visible.sync="codeShow"

              width="20%"

            >

              <div v-loading="loadingCode" id="qrcode" ref="qrCodeUrl"></div>

              <span slot="footer" class="dialog-footer">

              <el-button size="small" type="primary" @click="codeShow = false"

                  >确 定</el-button

                >

              </span>

</el-dialog>

（2）.data

               

{

      codeShow: false,//控制是否显示二维码

      loadingCode: true,//控制加载动画

      sourCodeUrl: `${window.location.protocol}//${window.location.host}/#/h5`, // 跳转地址地址

}

（3）.js

lookCode(data) {

        //定义跳转的地址，可以传参方便扫码后获取数据

      let url =

        this.sourCodeUrl +

        `?active=sixth&plant=${data.plant}&searchId=${data.id}`;

      this.$nextTick(() => {

        this.codeShow = true;

        setTimeout(() => {

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

          var qrcode = new QRCode(this.$refs.qrCodeUrl, {

            text: url,

            width: 130,

            height: 130,

            colorDark: "#000000",

            colorLight: "#ffffff",

            correctLevel: QRCode.CorrectLevel.H,

          });

        }, 200);

      });

    },