生成二维码插件

一、npm install qrcodejs2 --save
在components里放入qrcode.vue
qrcode.vue：

<template>
  <div id="qrCode" ref="qrCodeDiv"></div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  name: "qrCode",
  props: ["url"],
  data() {
    return {};
  },
  mounted: function() {
    this.$nextTick(function() {
      this.bindQRCode();
    });
  },
  methods: {
    bindQRCode: function() {
      new QRCode(this.$refs.qrCodeDiv, {
        text: this.url,
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
      });
    }
  }
};
</script>

使用插件
html：

 <!-- 二维码 -->
    <el-dialog title="二维码" :visible.sync="dialogVisible" width="30%">
      <span style="display:flex;justify-content: center;">
        <qr :url="url"></qr>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

js：

import qr from "../../components/qrcode";

  components: {
    qr
  },

 // 二维码按钮
    twocode(row) {
      console.log(row);
      this.dialogVisible = true;
      this.url = `http://192.168.1.118:8081/oneregister?maid=${row.maid}`;
      console.log(this.url);
    }