From d6f957433163dff94f909fa65614e68db7a12bb2 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Mon, 4 Mar 2024 18:08:36 +0000
Subject: [PATCH] update: formatting qrcode component

---
 src/components/business/qrcode/index.vue | 60 ++++--------------------
 src/components/business/qrcode/method.ts | 53 +++++++++++++++++++++
 2 files changed, 61 insertions(+), 52 deletions(-)
 create mode 100644 src/components/business/qrcode/method.ts

diff --git a/src/components/business/qrcode/index.vue b/src/components/business/qrcode/index.vue
index 57151aa..3828c6e 100644
--- a/src/components/business/qrcode/index.vue
+++ b/src/components/business/qrcode/index.vue
@@ -11,10 +11,11 @@
 
 <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 QRCodeStyling, {DotType, Options } from 'qr-code-styling'
 import { debounce } from 'throttle-debounce'
+import { generateOption } from './method'
 
-type TProps = {
+export type TQrcodeProps = {
   width?: number
   height?: number
   image?: string
@@ -25,7 +26,7 @@ type TProps = {
   }
 }
 
-const props = withDefaults(defineProps<TProps>(), {
+const props = withDefaults(defineProps<TQrcodeProps>(), {
   width: 300,
   height: 300,
   dotsOptions: () => ({
@@ -34,7 +35,7 @@ const props = withDefaults(defineProps<TProps>(), {
   })
 })
 
-let options = {}
+let options: Options = {}
 watch(
   () => [props.width, props.height, props.dotsOptions],
   () => {
@@ -43,56 +44,11 @@ watch(
 )
 
 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' }]
-      // },
-    },
-  }
+  options = generateOption(props)
   if (props.value) {
-    qrCode.update(options)
+    options && qrCode.update(options)
     await nextTick()
-    if (!qrCodeDom.value || !qrCodeDom.value.firstChild) return
+    if (!qrCodeDom?.value?.firstChild) return
     (qrCodeDom.value.firstChild as HTMLElement).setAttribute('style', "width: 100%;") // 强制其适应缩放
   }
 })
diff --git a/src/components/business/qrcode/method.ts b/src/components/business/qrcode/method.ts
new file mode 100644
index 0000000..c7c256b
--- /dev/null
+++ b/src/components/business/qrcode/method.ts
@@ -0,0 +1,53 @@
+import { CornerDotType, CornerSquareType, DrawType, ErrorCorrectionLevel, Mode, Options, TypeNumber } from "qr-code-styling"
+import { TQrcodeProps } from "./index.vue"
+
+/** 生成二维码数据 */
+export function generateOption(props: TQrcodeProps): Options {
+  return {
+    width: props.width,
+    height: props.height,
+    type: 'canvas', // canvas svg
+    data: props.value,
+    image: props.image, // /favicon.svg
+    margin: 0,
+    qrOptions: {
+      typeNumber: 3,
+      mode: 'Byte',
+      errorCorrectionLevel: 'M',
+    },
+    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' }]
+      // },
+    },
+  }
+}
+