From efcdf0d02bb7ee9b585e0b324f922e7ffc86f206 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Mon, 4 Mar 2024 13:34:13 +0000
Subject: [PATCH] feat: convert qrcode component to vue3

---
 src/components/business/qrcode/index.vue | 189 +++++++++++------------
 src/components/business/qrcode/test      | 108 +++++++++++++
 2 files changed, 202 insertions(+), 95 deletions(-)
 create mode 100644 src/components/business/qrcode/test

diff --git a/src/components/business/qrcode/index.vue b/src/components/business/qrcode/index.vue
index 106d83a..57151aa 100644
--- a/src/components/business/qrcode/index.vue
+++ b/src/components/business/qrcode/index.vue
@@ -2,108 +2,107 @@
  * @Author: ShawnPhang
  * @Date: 2022-03-16 09:15:52
  * @Description:  
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-01-31 15:43:10
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @Date: 2024-03-04 09:50:00
 -->
 <template>
   <div ref="qrCodeDom" class="qrcode__wrap"></div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref, watch, nextTick } from 'vue'
-import QRCodeStyling, { DrawType, TypeNumber, Mode, ErrorCorrectionLevel, DotType, CornerSquareType, CornerDotType, Extension } from 'qr-code-styling'
+<script lang="ts" setup>
+import { onMounted, ref, watch, nextTick, defineProps } from 'vue'
+import QRCodeStyling, { DrawType, TypeNumber, Mode, ErrorCorrectionLevel, DotType, CornerSquareType, CornerDotType, } from 'qr-code-styling'
 import { debounce } from 'throttle-debounce'
 
-export default defineComponent({
-  props: {
-    width: {
-      default: 300,
-    },
-    height: {
-      default: 300,
-    },
-    image: {},
-    value: {},
-    dotsOptions: {
-      default: () => {
-        return {}
-      },
-    },
-  },
-  setup(props) {
-    let options = {}
-    watch(
-      () => [props.width, props.height, props.dotsOptions],
-      () => {
-        render()
-      },
-    )
+type TProps = {
+  width?: number
+  height?: number
+  image?: string
+  value?: string
+  dotsOptions: {
+    color: string,
+    type: DotType,
+  }
+}
 
-    const render = debounce(300, false, async () => {
-      options = {
-        width: props.width,
-        height: props.height,
-        type: 'canvas' as DrawType, // canvas svg
-        data: props.value,
-        image: props.image, // /favicon.svg
-        margin: 0,
-        qrOptions: {
-          typeNumber: 3 as TypeNumber,
-          mode: 'Byte' as Mode,
-          errorCorrectionLevel: 'M' as ErrorCorrectionLevel,
-        },
-        imageOptions: {
-          hideBackgroundDots: true,
-          imageSize: 0.4,
-          margin: 6,
-          crossOrigin: 'anonymous',
-        },
-        backgroundOptions: {
-          color: '#ffffff',
-        },
-        dotsOptions: {
-          color: '#41b583',
-          type: 'rounded' as DotType,
-          ...props.dotsOptions,
-        },
-        cornersSquareOptions: {
-          color: props.dotsOptions.color,
-          type: '',
-          // type: 'extra-rounded' as CornerSquareType,
-          // gradient: {
-          //   type: 'linear', // 'radial'
-          //   rotation: 180,
-          //   colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
-          // },
-        },
-        cornersDotOptions: {
-          color: props.dotsOptions.color,
-          type: 'square' as CornerDotType,
-          // gradient: {
-          //   type: 'linear', // 'radial'
-          //   rotation: 180,
-          //   colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
-          // },
-        },
-      }
-      if (props.value) {
-        qrCode.update(options)
-        await nextTick()
-        qrCodeDom.value.firstChild.style = 'width: 100%;' // 强制其适应缩放
-      }
-    })
-
-    const qrCode = new QRCodeStyling(options)
-    const qrCodeDom = ref<HTMLElement>()
-
-    onMounted(() => {
-      render()
-      qrCode.append(qrCodeDom.value)
-    })
-
-    return {
-      qrCodeDom,
-    }
-  },
+const props = withDefaults(defineProps<TProps>(), {
+  width: 300,
+  height: 300,
+  dotsOptions: () => ({
+    color: '#41b583',
+    type: 'rounded',
+  })
 })
+
+let options = {}
+watch(
+  () => [props.width, props.height, props.dotsOptions],
+  () => {
+    render()
+  },
+)
+
+const render = debounce(300, false, async () => {
+  options = {
+    width: props.width,
+    height: props.height,
+    type: 'canvas' as DrawType, // canvas svg
+    data: props.value,
+    image: props.image, // /favicon.svg
+    margin: 0,
+    qrOptions: {
+      typeNumber: 3 as TypeNumber,
+      mode: 'Byte' as Mode,
+      errorCorrectionLevel: 'M' as ErrorCorrectionLevel,
+    },
+    imageOptions: {
+      hideBackgroundDots: true,
+      imageSize: 0.4,
+      margin: 6,
+      crossOrigin: 'anonymous',
+    },
+    backgroundOptions: {
+      color: '#ffffff',
+    },
+    dotsOptions: {
+      // color: '#41b583',
+      // type: 'rounded' as DotType,
+      ...props.dotsOptions,
+    },
+    cornersSquareOptions: {
+      color: props.dotsOptions.color,
+      type: '',
+      // type: 'extra-rounded' as CornerSquareType,
+      // gradient: {
+      //   type: 'linear', // 'radial'
+      //   rotation: 180,
+      //   colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
+      // },
+    },
+    cornersDotOptions: {
+      color: props.dotsOptions.color,
+      type: 'square' as CornerDotType,
+      // gradient: {
+      //   type: 'linear', // 'radial'
+      //   rotation: 180,
+      //   colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
+      // },
+    },
+  }
+  if (props.value) {
+    qrCode.update(options)
+    await nextTick()
+    if (!qrCodeDom.value || !qrCodeDom.value.firstChild) return
+    (qrCodeDom.value.firstChild as HTMLElement).setAttribute('style', "width: 100%;") // 强制其适应缩放
+  }
+})
+
+const qrCode = new QRCodeStyling(options)
+const qrCodeDom = ref<HTMLElement>()
+
+onMounted(() => {
+  render()
+  qrCode.append(qrCodeDom.value)
+})
+
 </script>
diff --git a/src/components/business/qrcode/test b/src/components/business/qrcode/test
new file mode 100644
index 0000000..57151aa
--- /dev/null
+++ b/src/components/business/qrcode/test
@@ -0,0 +1,108 @@
+<!--
+ * @Author: ShawnPhang
+ * @Date: 2022-03-16 09:15:52
+ * @Description:  
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @Date: 2024-03-04 09:50:00
+-->
+<template>
+  <div ref="qrCodeDom" class="qrcode__wrap"></div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch, nextTick, defineProps } from 'vue'
+import QRCodeStyling, { DrawType, TypeNumber, Mode, ErrorCorrectionLevel, DotType, CornerSquareType, CornerDotType, } from 'qr-code-styling'
+import { debounce } from 'throttle-debounce'
+
+type TProps = {
+  width?: number
+  height?: number
+  image?: string
+  value?: string
+  dotsOptions: {
+    color: string,
+    type: DotType,
+  }
+}
+
+const props = withDefaults(defineProps<TProps>(), {
+  width: 300,
+  height: 300,
+  dotsOptions: () => ({
+    color: '#41b583',
+    type: 'rounded',
+  })
+})
+
+let options = {}
+watch(
+  () => [props.width, props.height, props.dotsOptions],
+  () => {
+    render()
+  },
+)
+
+const render = debounce(300, false, async () => {
+  options = {
+    width: props.width,
+    height: props.height,
+    type: 'canvas' as DrawType, // canvas svg
+    data: props.value,
+    image: props.image, // /favicon.svg
+    margin: 0,
+    qrOptions: {
+      typeNumber: 3 as TypeNumber,
+      mode: 'Byte' as Mode,
+      errorCorrectionLevel: 'M' as ErrorCorrectionLevel,
+    },
+    imageOptions: {
+      hideBackgroundDots: true,
+      imageSize: 0.4,
+      margin: 6,
+      crossOrigin: 'anonymous',
+    },
+    backgroundOptions: {
+      color: '#ffffff',
+    },
+    dotsOptions: {
+      // color: '#41b583',
+      // type: 'rounded' as DotType,
+      ...props.dotsOptions,
+    },
+    cornersSquareOptions: {
+      color: props.dotsOptions.color,
+      type: '',
+      // type: 'extra-rounded' as CornerSquareType,
+      // gradient: {
+      //   type: 'linear', // 'radial'
+      //   rotation: 180,
+      //   colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
+      // },
+    },
+    cornersDotOptions: {
+      color: props.dotsOptions.color,
+      type: 'square' as CornerDotType,
+      // gradient: {
+      //   type: 'linear', // 'radial'
+      //   rotation: 180,
+      //   colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
+      // },
+    },
+  }
+  if (props.value) {
+    qrCode.update(options)
+    await nextTick()
+    if (!qrCodeDom.value || !qrCodeDom.value.firstChild) return
+    (qrCodeDom.value.firstChild as HTMLElement).setAttribute('style', "width: 100%;") // 强制其适应缩放
+  }
+})
+
+const qrCode = new QRCodeStyling(options)
+const qrCodeDom = ref<HTMLElement>()
+
+onMounted(() => {
+  render()
+  qrCode.append(qrCodeDom.value)
+})
+
+</script>