<template>
  <img :src="QRImgUrl" alt="二维码" :width="width" :height="height" />
</template>

<script>
import QRCode from "qrcode";

export default {
  name: 'QrCode',
  props: {
    // 需要生成二维码的内容
    text: {
      type: String,
      default: null,
      required: true
    },
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      QRImgUrl: null,
    }
  },
  watch: {
    text(val) {
      this.getQrCode(val);
    }
  },
  created() {
    this.getQrCode(this.text);
  },
  methods: {
    // 获取二维码
    getQrCode(text) {
      let opts = {
        errorCorrectionLevel: "L",//容错级别
        type: "image/png",//生成的二维码类型
        quality: 0.3,//二维码质量
        margin: 2,//二维码留白边距
        width: 128,//宽
        height: 128,//高
        text: text,//二维码内容
        color: {
          dark: "#333",//前景色
          light: "#fff"//背景色
        }
      };
      // 根据文本生成二维码
      QRCode.toDataURL(this.text, opts, (err, url) => {
        if (err) throw err
        //将生成的二维码路径复制给data的QRImgUrl
        this.QRImgUrl = url;
      });
    },
  }
}
</script>
