From e50552fb9b27bab7b619260bb0cef7bf0f7123c1 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Sat, 24 May 2025 17:27:07 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(qr-code):=20=E5=B0=86=E5=BF=85?=
 =?UTF-8?q?=E8=A6=81=E7=9A=84=E5=B1=9E=E6=80=A7=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pc/app/qr-code/style-composition-api.vue   | 17 ++++++++++++++---
 examples/sites/demos/pc/app/qr-code/style.vue  | 18 +++++++++++++++---
 packages/renderless/src/qr-code/vue.ts         | 12 +++++++++++-
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/examples/sites/demos/pc/app/qr-code/style-composition-api.vue b/examples/sites/demos/pc/app/qr-code/style-composition-api.vue
index c2d7ab4a78..f0707e59ea 100644
--- a/examples/sites/demos/pc/app/qr-code/style-composition-api.vue
+++ b/examples/sites/demos/pc/app/qr-code/style-composition-api.vue
@@ -1,14 +1,25 @@
 <template>
-  <tiny-qr-code v-bind="params"></tiny-qr-code>
+  <div class="qr-code-container">
+    <div>
+      <tiny-button @click="changeColor">改变颜色</tiny-button>
+    </div>
+    <br />
+    <tiny-qr-code v-bind="params"></tiny-qr-code>
+  </div>
 </template>
 
 <script setup>
-import { TinyQrCode } from '@opentiny/vue'
+import { TinyQrCode, TinyButton } from '@opentiny/vue'
+import { ref } from 'vue'
 
-const params = {
+const params = ref({
   value: '测试二维码数据',
   color: '#1677ff',
   size: 250,
   style: { background: '#f5f5f5', padding: '24px' }
+})
+
+const changeColor = () => {
+  params.value.color = '#666'
 }
 </script>
diff --git a/examples/sites/demos/pc/app/qr-code/style.vue b/examples/sites/demos/pc/app/qr-code/style.vue
index 4842e5c7bc..20aaa89c91 100644
--- a/examples/sites/demos/pc/app/qr-code/style.vue
+++ b/examples/sites/demos/pc/app/qr-code/style.vue
@@ -1,13 +1,20 @@
 <template>
-  <tiny-qr-code v-bind="params"></tiny-qr-code>
+  <div class="qr-code-container">
+    <div>
+      <tiny-button @click="changeColor">改变颜色</tiny-button>
+    </div>
+    <br />
+    <tiny-qr-code v-bind="params"></tiny-qr-code>
+  </div>
 </template>
 
 <script>
-import { TinyQrCode } from '@opentiny/vue'
+import { TinyQrCode, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyQrCode
+    TinyQrCode,
+    TinyButton
   },
   data() {
     return {
@@ -18,6 +25,11 @@ export default {
         style: { background: '#f5f5f5', padding: '24px' }
       }
     }
+  },
+  methods: {
+    changeColor() {
+      this.params.color = '#666'
+    }
   }
 }
 </script>
diff --git a/packages/renderless/src/qr-code/vue.ts b/packages/renderless/src/qr-code/vue.ts
index d54717bd4d..f8ab8a6246 100644
--- a/packages/renderless/src/qr-code/vue.ts
+++ b/packages/renderless/src/qr-code/vue.ts
@@ -21,7 +21,17 @@ export const renderless = (props, { reactive, watch, onMounted }, { vm, emit },
   })
 
   watch(
-    () => [props.level, props.value],
+    () => [
+      props.level,
+      props.value,
+      props.color,
+      props.style,
+      props.size,
+      props.icon,
+      props.level,
+      props.iconSize,
+      props.bordered
+    ],
     () => {
       api.draw()
       api.change()

From 1d7832977890c10471f9bd8e2fe18168cd20a2e9 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Sat, 24 May 2025 17:29:33 +0800
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E9=87=8D?=
 =?UTF-8?q?=E5=A4=8D=E7=9B=91=E5=90=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/renderless/src/qr-code/vue.ts | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/renderless/src/qr-code/vue.ts b/packages/renderless/src/qr-code/vue.ts
index f8ab8a6246..678fc8a6b4 100644
--- a/packages/renderless/src/qr-code/vue.ts
+++ b/packages/renderless/src/qr-code/vue.ts
@@ -21,17 +21,7 @@ export const renderless = (props, { reactive, watch, onMounted }, { vm, emit },
   })
 
   watch(
-    () => [
-      props.level,
-      props.value,
-      props.color,
-      props.style,
-      props.size,
-      props.icon,
-      props.level,
-      props.iconSize,
-      props.bordered
-    ],
+    () => [props.level, props.value, props.color, props.style, props.size, props.icon, props.iconSize, props.bordered],
     () => {
       api.draw()
       api.change()