点击生成二维码 使用qrcodejs2插件

 

<template>
  <div class="qr-code">
    <van-row type="flex" justify="center">
      <van-col span="22">
        <div id="bor" class="er" @click="getQRCode"></div>
        <p class="text">点生成二维码</p>
      </van-col>
    </van-row>
  </div>
</template>

<script>
// yarn add qrcodejs2 安装
import QRCode from "qrcodejs2";

export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    getQRCode() {
      //判断qr容器是否存在, 存在就删除
      var qr = document.getElementById("qr");
      if (qr != null) {
        qr.parentNode.removeChild(qr);
      }

      //创建容器,存放qrcode创建出来的元素
      var el = document.createElement("div");
      el.setAttribute("id", "qr");
      el.setAttribute("class", "qr");
      document.getElementById("bor").appendChild(el);

      //创建 qrcode
      var qrcode = new QRCode(document.getElementById("qr"), {
        width: 140,
        height: 140
      });
      
      //不知道什么作用,也起不了清除的作用
      qrcode.clear();

      qrcode.makeCode(
        "http://192.168.0.109:8080/vehicle_electronic_system/electrical_installations"
      );
    }
  }
};
</script>