<template>
  <div id="qrcode" ref="qrcode"></div>
</template>

<script>
  import QRCode from 'qrcodejs2' // 引入qrcode
  export default {
    name: "qrcode",
    props: {
      field: Object,
      formData: {
        type: Object,
        default () {
          return {}
        }

      },
      readonly: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        flag: false, //标记二维码是否已经生成
      }
    },
    watch: {
      formData(val) {
        if (val.zongWaiJian != '') {
          if (!this.flag) {
            this.qrcode(val.zongWaiJian)
            this.flag = true;
          }
        }
      }
    },

    methods: {

      qrcode(zongWaiJian) {
        console.log('执行生成二维码');
        let qrcode = new QRCode('qrcode', {
          width: 132,
          height: 132,
          colorDark: "#000000", //前景色
          colorLight: "#FFFFFF", //背景色
          correctLevel: QRCode.CorrectLevel.L,


        })
      },
    },

  }
</script>

<style scoped>
  #qrcode {
    width: 100px;
    height: 100px;
  }
</style>
