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

---
 src/components/business/qrcode/test | 108 ----------------------------
 1 file changed, 108 deletions(-)
 delete mode 100644 src/components/business/qrcode/test

diff --git a/src/components/business/qrcode/test b/src/components/business/qrcode/test
deleted file mode 100644
index 57151aa..0000000
--- a/src/components/business/qrcode/test
+++ /dev/null
@@ -1,108 +0,0 @@
-<!--
- * @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>