<template>
  <div class="qr">
    <img class="qr__img" :src="qrBase64" style="width: 100%;" />
  </div>
</template>

<script>
import QRcode from 'qrcode'
export default {
  name:"QRcodeIndex",
  props: {
    qrContent: {
      type: String,
      default: ''
    },
    option:Object
  },
  data () {
    return {
      qrBase64: ''
    }
  },
  watch: {
    qrContent: {
      handler: function () {
        this.qrContent && this.init()
      },
      immediate: true
    }
  },
  methods: {
    async init () {
      this.qrBase64 = await this.createQR(this.qrContent,this.option)
    },
    // 生成二维码
    createQR (content, options) {
      return new Promise((resolve, reject) => {
        QRcode.toDataURL(content, options).then(url => {
          resolve(url)
        })
      })
    },
  }
}
</script>

<style scoped>
/* .qr{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.qr__img{
  width: 100%;
  height: 200px;
} */
</style>
