From dd18a1a720748cced229e6fb9ccbe93852e4ed7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E7=A3=8A?= <45566618@qq.com>
Date: Thu, 10 Jul 2025 17:57:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QrcodeVue3/src/QRCodeVue3.vue |  98 ++++--------
 src/views/demo/comp/qrcodevue3/index.vue     |  86 +++++++++++
 src/views/iotsync/yiweilian/index.vue        | 151 ++++++++-----------
 3 files changed, 178 insertions(+), 157 deletions(-)
 create mode 100644 src/views/demo/comp/qrcodevue3/index.vue

diff --git a/src/components/QrcodeVue3/src/QRCodeVue3.vue b/src/components/QrcodeVue3/src/QRCodeVue3.vue
index fe463cd..e911e38 100644
--- a/src/components/QrcodeVue3/src/QRCodeVue3.vue
+++ b/src/components/QrcodeVue3/src/QRCodeVue3.vue
@@ -1,14 +1,13 @@
 <template>
-  <div class="qrcode-container">
+  <main class="qrcode">
+    <div class="code" ref="code">
     <!-- 直接绑定ref到QRCodeVue3组件 -->
-    <QRCodeVue3 ref="qrcodeInstance" render-as="canvas" :margin="margin" :width="width" :height="height" :value="value"
+    <QRCodeVue3 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>
+      :cornersDotOptions="cornersDotOptions" :download="download" :buttonName="buttonName" :key="key" />
+    </div>
+  </main>
 </template>
 
 <script lang="ts" setup>
@@ -16,11 +15,6 @@ import { ref, reactive, toRefs, nextTick } from 'vue'
 import QRCodeVue3 from 'qrcode-vue3'
 import type { PropType } from 'vue'
 
-// 定义组件实例类型
-interface QRCodeExpose {
-  $el: HTMLCanvasElement
-}
-
 const props = defineProps({
   key: {
     type: String as PropType<string>,
@@ -130,12 +124,17 @@ const props = defineProps({
         ]
       }
     })
-  }
+  },
+  download: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  buttonName: {
+    type: String as PropType<string>,
+    default: "下载二维码",
+  },
 })
 
-const qrcodeInstance = ref<QRCodeExpose | null>(null)
-const isDownloading = ref(false)
-
 const data = reactive({
   key: props.key,
   width: props.width,
@@ -160,6 +159,8 @@ const data = reactive({
   dotsOptions: props.dotsOptions,
   cornersSquareOptions: props.cornersSquareOptions,
   cornersDotOptions: props.cornersDotOptions,
+  download: props.download,
+  buttonName: props.buttonName,
 })
 
 const {
@@ -174,60 +175,21 @@ const {
   imageOptions,
   dotsOptions,
   cornersSquareOptions,
-  cornersDotOptions
+  cornersDotOptions,
+  download,
+  buttonName
 } = 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;
+<style lang="less">
+.qrcode {
+  .code {
+    padding: 8px;
+    width: 360px;
+    height: 360px;
+    border-radius: 6px;
+    border: 1px solid gray;
+  }
 }
-
-.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
+</style>
diff --git a/src/views/demo/comp/qrcodevue3/index.vue b/src/views/demo/comp/qrcodevue3/index.vue
new file mode 100644
index 0000000..5a670d6
--- /dev/null
+++ b/src/views/demo/comp/qrcodevue3/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <QRCodeVue3
+    ref="qrcodeInstance"
+    margin="5"
+    width="400"
+    height="400"
+    :key="qrCodeKey"
+    :value="data.value"
+    :logo="data.logoImage"
+    download="true"
+  />
+  <button @click="downloadQRCode" :disabled="isDownloading" class="download-btn">
+    {{ isDownloading ? '生成中...' : '下载二维码' }}
+  </button>
+</template>
+
+<script lang="ts" name="qrcode" setup>
+import {computed, nextTick, reactive, ref} from "vue";
+import { QRCodeVue3 } from '/@/components/QrcodeVue3';
+import image from "@/assets/images/logo.png";
+
+// 定义组件实例类型
+interface QRCodeExpose {
+  $el: HTMLCanvasElement
+}
+
+const data = reactive({
+  value: 'www.baidu.com',
+  logoImage: image,
+})
+const qrCodeKey = computed(()=>data.value.length + data.logoImage.length);
+
+const qrcodeInstance = ref<QRCodeExpose | null>(null)
+const isDownloading = ref(false)
+
+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 lang="less">
+
+.download-btn {
+  margin-top:20px;
+  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>
diff --git a/src/views/iotsync/yiweilian/index.vue b/src/views/iotsync/yiweilian/index.vue
index 5a41bb0..5a670d6 100644
--- a/src/views/iotsync/yiweilian/index.vue
+++ b/src/views/iotsync/yiweilian/index.vue
@@ -1,113 +1,86 @@
 <template>
-  <main class="qrcode">
-    <div class="form">
-      <input
-        type="text"
-        v-model="data.value"
-        placeholder="请在这里输入要生成的内容！"
-        @change="changeValue"
-      />
-      <JImageUpload
-        text="上传LOGO"
-        ref="uploadRef"
-        v-model:value="data.logoImage"
-        @change="upFile"
-      />
-    </div>
-
-    <div class="code" ref="code">
-      <QRCodeVue3
-        margin="5"
-        width="400"
-        height="400"
-        :key="qrCodeKey"
-        :value="data.value"
-        :logo="data.logoImage"
-      />
-    </div>
-  </main>
+  <QRCodeVue3
+    ref="qrcodeInstance"
+    margin="5"
+    width="400"
+    height="400"
+    :key="qrCodeKey"
+    :value="data.value"
+    :logo="data.logoImage"
+    download="true"
+  />
+  <button @click="downloadQRCode" :disabled="isDownloading" class="download-btn">
+    {{ isDownloading ? '生成中...' : '下载二维码' }}
+  </button>
 </template>
 
 <script lang="ts" name="qrcode" setup>
 import {computed, nextTick, reactive, ref} from "vue";
 import { QRCodeVue3 } from '/@/components/QrcodeVue3';
-import { JImageUpload } from '/@/components/Form/index';
 import image from "@/assets/images/logo.png";
 
-const uploadUrl = ref('');
+// 定义组件实例类型
+interface QRCodeExpose {
+  $el: HTMLCanvasElement
+}
+
 const data = reactive({
   value: 'www.baidu.com',
   logoImage: image,
 })
-
-// const qrCodeKey = ref(0);
-
 const qrCodeKey = computed(()=>data.value.length + data.logoImage.length);
-// console.log(qrCodeKey.value);
 
-function upFile(){
-  // console.log(data.logoImage);
-  // qrCodeKey.value = qrCodeKey.value + 1;
-  // console.log(qrCodeKey.value);
-}
+const qrcodeInstance = ref<QRCodeExpose | null>(null)
+const isDownloading = ref(false)
 
-function changeValue(){
-  // qrCodeKey.value = qrCodeKey.value + 1;
+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 lang="less">
-.qrcode {
-  .form {
-    margin: 30px auto;
-    width: 86%;
 
-    input {
-      box-sizing: border-box;
-      padding: 0 10px;
-      width: 80%;
-      height: 50px;
-      font-size: 18px;
-      border: 1px solid #767676;
-      border-radius: 6px 0 0 6px;
-    }
-
-    button {
-      box-sizing: border-box;
-      position: relative;
-      width: 20%;
-      height: 50px;
-      font-size: 18px;
-      vertical-align: top;
-      color: white;
-      background: #42b983;
-      border: 1px solid #767676;
-      border-radius: 0 6px 6px 0;
-      border-left: none;
-      overflow: hidden;
-      cursor: pointer;
-
-      input {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-        opacity: 0;
-      }
-    }
-  }
-
-  .code {
-    margin: auto;
-    padding: 8px;
-    width: 360px;
-    height: 360px;
-    border-radius: 6px;
-    border: 1px solid gray;
-  }
+.download-btn {
+  margin-top:20px;
+  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>