<template>
  <div class="qrcode-box">
    <div id="qrcode" class="qrcode"></div>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { useModel } from "@zjxpcyc/vue-tiny-store";

  const [,update] = useModel("qrcode");

  onMounted(() => {
    const qrcode = new QRCode("qrcode");
    qrcode.makeCode(location.origin + location.pathname);

    const qrCanvas = document.querySelector('#qrcode canvas');
    update(qrCanvas.toDataURL(undefined, 0.9))
  })
</script>

<style lang="less" scoped>
.qrcode-box {
  position: absolute;
  max-width: 1px;
  max-height: 1px;
  overflow: hidden;
  // z-index: 1000;

  .qrcode {
    width:160px;
    height:160px;
  }
}
</style>
