<template>
    <div ref="qrcode" class="qrcodetags">

    </div>
</template>
  



<script>
import QRCodeStyling from "qr-code-styling";

export default {
  name: "QrCode",
  props: {
    value: {
      type: String,
      required: true
    },
    width: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      qrCode: null // 用于存储二维码实例
    };
  },
  mounted() {
    // this.initQRCode();
  },
  methods: {
    initQRCode() {
      console.info("initQRCode");
      if (this.qrCode) {
        this.qrCode.clear(); // 清除已存在的二维码
      }

      this.qrCode = new QRCodeStyling({
        width: this.width,
        data: this.value,
        image: "", // 如果你想添加logo到二维码中间，可以在这里提供图片URL
        dotsOptions: {
          color: "#000000"
        },
        backgroundOptions: {
          color: "#ffffff"
        },
        imageOptions: {
          crossOrigin: "anonymous",
          margin: 10
        }
      });

      this.qrCode.append(this.$refs.qrcode);
    },
    updateQRCode(newValue) {
      if (this.qrCode) {
        this.qrCode.update({ data: newValue }); // 更新二维码的数据
      } else {
        this.initQRCode(); // 如果还没有初始化，则初始化
      }
    }
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.updateQRCode(newVal);
      }
    }
  },
  beforeDestroy() {
    if (this.qrCode) {
      this.qrCode.clear(); // 在组件销毁前清除二维码
    }
  }
};
</script>
  
<style scoped>
  .qrcodetags{
    margin: 0 auto;
    width: 200px;
    /* height: 200px; */
  }
</style>