fix(QRCode): fix SVG QRCode not reactive to value prop changes (#5864)

* fix(QrCode): fix SVG QRCode not reactive to value prop changes

* test(QRCode): add tests for value prop changes in canvas and svg modes

* chore: stash changelog [ci skip]

* chore: stash changelog [ci skip]

* chore: stash changelog [ci skip]

---------

Co-authored-by: tdesign-bot <[email protected]>

Author: RSS1102

packages/components/qrcode/__tests__/qrcode.test.tsx

@@ -92,5 +92,41 @@ describe('QRCode', () => {
       await wrapper.setProps({ status: 'expired', statusRender });
       expect(statusRender).toBeCalled();
     });
+
+    it(':value[string] changes - canvas mode', async () => {
+      await wrapper.setProps({ type: 'canvas' });
+      const initialValue = 'https://tdesign.tencent.com/';
+      const newValue = 'https://github.com/Tencent/tdesign-vue-next';
+      expect(wrapper.vm.value).eq(initialValue);
+
+      await wrapper.setProps({ value: newValue });
+
+      expect(wrapper.vm.value).eq(newValue);
+      expect(wrapper.find('.t-qrcode').find('canvas').exists()).eq(true);
+    });
+
+    it(':value[string] changes - svg mode', async () => {
+      await wrapper.setProps({ type: 'svg' });
+
+      const initialValue = 'https://tdesign.tencent.com/';
+      const newValue = 'https://github.com/Tencent/tdesign-vue-next';
+
+      expect(wrapper.vm.value).eq(initialValue);
+
+      const initialSvg = wrapper.find('.t-qrcode').find('svg');
+      expect(initialSvg.exists()).eq(true);
+      const initialPaths = initialSvg.findAll('path');
+      const initialFgPath = initialPaths[1].attributes('d');
+      await wrapper.setProps({ value: newValue });
+
+      expect(wrapper.vm.value).eq(newValue);
+      const updatedSvg = wrapper.find('.t-qrcode').find('svg');
+      expect(updatedSvg.exists()).eq(true);
+      const updatedPaths = updatedSvg.findAll('path');
+      const updatedFgPath = updatedPaths[1].attributes('d');
+
+      // 验证前景路径已改变（不同的 value 应该生成不同的二维码图案）
+      expect(updatedFgPath).not.eq(initialFgPath);
+    });
   });
 });

packages/components/qrcode/components/qrcode-svg.tsx

@@ -12,24 +12,28 @@ export default defineComponent({
   name: 'QRCodeSVG',
   props: QRCodeSubComponentProps,
   setup(props) {
-    const { margin, cells, numCells, calculatedImageSettings } = useQRCode({
-      value: props.value,
-      level: props.level,
-      minVersion: DEFAULT_MINVERSION,
-      includeMargin: DEFAULT_NEED_MARGIN,
-      marginSize: props.marginSize,
-      imageSettings: props.imageSettings,
-      size: props.size,
-    });
+    const qrCodeData = computed(() =>
+      useQRCode({
+        value: props.value,
+        level: props.level,
+        minVersion: DEFAULT_MINVERSION,
+        includeMargin: DEFAULT_NEED_MARGIN,
+        marginSize: props.marginSize,
+        imageSettings: props.imageSettings,
+        size: props.size,
+      }),
+    );
 
     const cellsToDraw = computed(() => {
+      const { cells, calculatedImageSettings } = qrCodeData.value;
       if (props.imageSettings && calculatedImageSettings.value?.excavation != null) {
         return excavateModules(cells.value, calculatedImageSettings.value.excavation);
       }
       return cells.value;
     });
 
     const imageNode = computed(() => {
+      const { calculatedImageSettings, margin } = qrCodeData.value;
       if (!props.imageSettings || !calculatedImageSettings.value) return null;
 
       return (
@@ -45,6 +49,7 @@ export default defineComponent({
     });
 
     return () => {
+      const { margin, numCells } = qrCodeData.value;
       const fgPath = generatePath(cellsToDraw.value, margin.value);
       return (
         <svg

packages/tdesign-vue-next/.changelog/pr-5864.md

@@ -0,0 +1,6 @@
+---
+pr_number: 5864
+contributor: RSS1102
+---
+
+- fix(QRCode): 修复 `type='svg'` 时 `value` 值变化而二维码未刷新的问题 @RSS1102 ([#5864](https://github.com/Tencent/tdesign-vue-next/pull/5864))