From e65263cffb8731d6c7a4476c1c32f832e9587111 Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Thu, 10 Jul 2025 13:40:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8B=E8=BD=BD=E4=BA=8C=E7=BB=B4=E7=A0=81?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QrcodeVue3/src/QRCodeVue3.vue | 428 ++++++++++---------
 1 file changed, 223 insertions(+), 205 deletions(-)

diff --git a/src/components/QrcodeVue3/src/QRCodeVue3.vue b/src/components/QrcodeVue3/src/QRCodeVue3.vue
index 327c9cb..fe463cd 100644
--- a/src/components/QrcodeVue3/src/QRCodeVue3.vue
+++ b/src/components/QrcodeVue3/src/QRCodeVue3.vue
@@ -1,215 +1,233 @@
 <template>
-  <div ref="qrcodeRef">
-    <QRCodeVue3
-      :margin="margin"
-      :width="width"
-      :height="height"
-      :value="value"
-      :qrOptions="qrOptions"
-      :image="image"
-      :imageOptions="imageOptions"
-      :dotsOptions="dotsOptions"
-      :backgroundOptions="backgroundOptions"
-      :cornersSquareOptions="cornersSquareOptions"
-      :cornersDotOptions="cornersDotOptions"
-      :key="key"
-    />
+  <div class="qrcode-container">
+    <!-- 直接绑定ref到QRCodeVue3组件 -->
+    <QRCodeVue3 ref="qrcodeInstance" render-as="canvas" :margin="margin" :width="width" :height="height" :value="value"
+      :qrOptions="qrOptions" :image="image" :imageOptions="imageOptions" :dotsOptions="dotsOptions"
+      :backgroundOptions="backgroundOptions" :cornersSquareOptions="cornersSquareOptions"
+      :cornersDotOptions="cornersDotOptions" :key="key" />
+    <button @click="downloadQRCode" :disabled="isDownloading" class="download-btn">
+      {{ isDownloading ? '生成中...' : '下载二维码' }}
+    </button>
   </div>
 </template>
 
-<script lang="ts">
-import {defineComponent, reactive, toRefs, PropType, ref} from "vue";
-import QRCodeVue3 from "qrcode-vue3";
+<script lang="ts" setup>
+import { ref, reactive, toRefs, nextTick } from 'vue'
+import QRCodeVue3 from 'qrcode-vue3'
+import type { PropType } from 'vue'
 
-export default defineComponent({
-  name: "Qrcode",
-  components: {
-    QRCodeVue3,
+// 定义组件实例类型
+interface QRCodeExpose {
+  $el: HTMLCanvasElement
+}
+
+const props = defineProps({
+  key: {
+    type: String as PropType<string>,
+    default: "0",
   },
-  props: {
-    // 二维码宽度
-    key: {
-      type: String as PropType<string>,
-      default: 0,
-    },
-    // 二维码宽度
-    width: {
-      type: String as PropType<string>,
-      default: 600,
-    },
-    // 二维码高度
-    height: {
-      type: String as PropType<string>,
-      default: 600,
-    },
-    // 二维码内容，网址
-    value: {
-      type: String as PropType<string>,
-      default: "https://www.focusnu.com/devops",
-    },
-    // 二维码图像的外边距
-    margin: {
-      type: String as PropType<string>,
-      default:6,
-    },
-    //二维码背景色
-    backgroundColor: {
-      type: String as PropType<string>,
-      default: "white",
-    },
-    //二维码中间的logo图片
-    logo: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    // 隐藏图片背后有点
-    hideLogoDots: {
-      type: Boolean as PropType<boolean>,
-      default: true,
-    },
-    //二维码中间的logo大小
-    logoSize: {
-      type: String as PropType<string>,
-      default: 0.5,
-    },
-    //二维码中间的logo外边距
-    logoMargin: {
-      type: String as PropType<string>,
-      default: 5,
-    },
-    //二维码点配置
-    dotsOptions: {
-      type: Object,
-      default: () => ({
-        type: "rounded", // 二维码样式 square | dots | rounded | extra-rounded | classy | classy-rounded
-        color: "#0d2a56", //不设置渐变色时显示的颜色
-        // 渐变色，优先级高于默认color颜色
-        gradient: {
-          type: "radial", // linear线性渐变 | radial径向渐变
-          rotation: 0,
-          colorStops: [
-            {
-              offset: 0,
-              color: "#21a3fa",
-            },
-            {
-              offset: 1,
-              color: "#0d2a56",
-            },
-          ],
-        },
-      }),
-    },
-    /**
-     * 角落广场配置
-     */
-    cornersSquareOptions: {
-      type: Object,
-      default: () => ({
-        type: "extra-rounded", // none | square | dot | extra-rounded
-        color: "#0d2a56",//不设置渐变色时显示的颜色
-        // 渐变色
-        gradient: {
-          type: "linear",
-          rotation: 0,
-          colorStops: [
-            {
-              offset: 0,
-              color: "#0d2a56",
-            },
-            {
-              offset: 1,
-              color: "#21a3fa",
-            },
-          ],
-        },
-      }),
-    },
-    /**
-     * 角落点配置
-     */
-    cornersDotOptions: {
-      type: Object,
-      default: () => ({
-        type: "dot", // none | square | dot
-        color: "#0d2a56",//不设置渐变色时显示的颜色
-        // 渐变色
-        gradient: {
-          type: "linear",
-          rotation: 0,
-          colorStops: [
-            {
-              offset: 0,
-              color: "#0d2a56",
-            },
-            {
-              offset: 1,
-              color: "#21a3fa",
-            },
-          ],
-        },
-      }),
-    },
+  width: {
+    type: String as PropType<string>,
+    default: "600",
   },
-  setup(props) {
-    console.log(props);
-    const qrcodeRef = ref(null);
-    const data = reactive({
-      key: props.key,//key值变化时自动刷新
-      /**
-       * 基础配置
-       * https://qr-code-styling.com
-       */
-      width: props.width, // 二维码宽度
-      height: props.height, // 二维码高度
-      value: props.value, // 二维码内容
-      margin: props.margin, // 二维码图像的外边距
-      /**
-       * 背景配置
-       */
-      backgroundOptions: {
-        //二维码背景色
-        color: props.backgroundColor,
-      },
-
-      /**
-       * 二维码配置
-       */
-      qrOptions: {
-        typeNumber: "0", // 类型编号 0 - 40
-        mode: "Byte", // 模式 Numeric | Alphanumeric | Byte | Kanji
-        errorCorrectionLevel: "Q", // 纠错等级 L | M | Q | H   'L'（低）、'M'（中）、'Q'（高）、'H'（非常高）
-      },
-
-      /**
-       * 图像配置（中心图片）
-       */
-      image: props.logo, // 二维码中心的图片
-      imageOptions: {
-        hideBackgroundDots: props.hideLogoDots, // 隐藏图片背后有点
-        imageSize: props.logoSize,
-        margin: props.logoMargin,
-        crossOrigin: "anonymous", // anonymous | use-credentials
-      },
-      /**
-       * 二维码点配置
-       */
-      dotsOptions: props.dotsOptions,
-      /**
-       * 角落广场配置
-       */
-      cornersSquareOptions: props.cornersSquareOptions,
-      /**
-       * 角落点配置
-       */
-      cornersDotOptions: props.cornersDotOptions,
-    });
-
-    return {
-      ...toRefs(data),
-      qrcodeRef
-    };
+  height: {
+    type: String as PropType<string>,
+    default: "600",
   },
-});
+  value: {
+    type: String as PropType<string>,
+    default: "https://www.focusnu.com/devops",
+  },
+  margin: {
+    type: String as PropType<string>,
+    default: "6",
+  },
+  backgroundColor: {
+    type: String as PropType<string>,
+    default: "white",
+  },
+  logo: {
+    type: String as PropType<string>,
+    default: '',
+  },
+  hideLogoDots: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  logoSize: {
+    type: String as PropType<string>,
+    default: "0.5",
+  },
+  logoMargin: {
+    type: String as PropType<string>,
+    default: "5",
+  },
+  dotsOptions: {
+    type: Object as PropType<{
+      type: string;
+      color: string;
+      gradient?: {
+        type: string;
+        rotation: number;
+        colorStops: Array<{ offset: number; color: string }>;
+      };
+    }>,
+    default: () => ({
+      type: "rounded",
+      color: "#0d2a56",
+      gradient: {
+        type: "radial",
+        rotation: 0,
+        colorStops: [
+          { offset: 0, color: "#21a3fa" },
+          { offset: 1, color: "#0d2a56" }
+        ]
+      }
+    })
+  },
+  cornersSquareOptions: {
+    type: Object as PropType<{
+      type: string;
+      color: string;
+      gradient?: {
+        type: string;
+        rotation: number;
+        colorStops: Array<{ offset: number; color: string }>;
+      };
+    }>,
+    default: () => ({
+      type: "extra-rounded",
+      color: "#0d2a56",
+      gradient: {
+        type: "linear",
+        rotation: 0,
+        colorStops: [
+          { offset: 0, color: "#0d2a56" },
+          { offset: 1, color: "#21a3fa" }
+        ]
+      }
+    })
+  },
+  cornersDotOptions: {
+    type: Object as PropType<{
+      type: string;
+      color: string;
+      gradient?: {
+        type: string;
+        rotation: number;
+        colorStops: Array<{ offset: number; color: string }>;
+      };
+    }>,
+    default: () => ({
+      type: "dot",
+      color: "#0d2a56",
+      gradient: {
+        type: "linear",
+        rotation: 0,
+        colorStops: [
+          { offset: 0, color: "#0d2a56" },
+          { offset: 1, color: "#21a3fa" }
+        ]
+      }
+    })
+  }
+})
+
+const qrcodeInstance = ref<QRCodeExpose | null>(null)
+const isDownloading = ref(false)
+
+const data = reactive({
+  key: props.key,
+  width: props.width,
+  height: props.height,
+  value: props.value,
+  margin: props.margin,
+  backgroundOptions: {
+    color: props.backgroundColor,
+  },
+  qrOptions: {
+    typeNumber: "0",
+    mode: "Byte",
+    errorCorrectionLevel: "Q",
+  },
+  image: props.logo,
+  imageOptions: {
+    hideBackgroundDots: props.hideLogoDots,
+    imageSize: props.logoSize,
+    margin: props.logoMargin,
+    crossOrigin: "anonymous",
+  },
+  dotsOptions: props.dotsOptions,
+  cornersSquareOptions: props.cornersSquareOptions,
+  cornersDotOptions: props.cornersDotOptions,
+})
+
+const {
+  key,
+  width,
+  height,
+  value,
+  margin,
+  backgroundOptions,
+  qrOptions,
+  image,
+  imageOptions,
+  dotsOptions,
+  cornersSquareOptions,
+  cornersDotOptions
+} = toRefs(data)
+
+const downloadQRCode = async () => {
+  isDownloading.value = true
+
+  await nextTick() // 确保 DOM 渲染完成
+
+  // 从组件根元素里查找第一个 img
+  const imgEl = qrcodeInstance.value?.$el?.querySelector?.('img')
+
+  if (imgEl && imgEl.src) {
+    const imgSrc = imgEl.src
+    const link = document.createElement('a')
+    link.href = imgSrc
+    link.download = 'qrcode.png'
+    link.click()
+  } else {
+    console.error('未找到二维码 img 或 src 为空')
+  }
+
+  isDownloading.value = false
+}
 
 </script>
+
+<style scoped>
+.qrcode-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.download-btn {
+  padding: 8px 16px;
+  background-color: #42b983;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 14px;
+  min-width: 120px;
+}
+
+.download-btn:hover {
+  background-color: #3aa876;
+  transform: translateY(-1px);
+}
+
+.download-btn:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+  transform: none;
+}
+</style>
\ No newline at end of file