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

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

* chore: remove useless attr

* chore: add canvas devDep

* chore: optimize

---------

Co-authored-by: Uyarn <uyarnchen@gmail.com>

Author: RSS1102

package.json

@@ -141,6 +141,7 @@
     "babel-polyfill": "^6.26.0",
     "c8": "^7.12.0",
     "camelcase": "~6.3.0",
+    "canvas": "~3.1.2",
     "cli-color": "^2.0.0",
     "commitizen": "^4.0.3",
     "cross-env": "^7.0.2",
@@ -159,7 +160,7 @@
     "gray-matter": "^4.0.3",
     "husky": "^7.0.4",
     "hyphenate": "^0.2.4",
-    "jsdom": "^25.0.0",
+    "jsdom": "^26.0.0",
     "less": "^4.1.2",
     "lint-staged": "^12.3.7",
     "mockdate": "^3.0.2",

src/qrcode/__tests__/index.test.jsx

@@ -64,18 +64,6 @@ describe('QRCode', () => {
 
     // it(':iconSize[number|object]-svg', async () => {});
 
-    // const level = ['L', 'M', 'Q', 'H'];
-    // level.forEach((item) => {
-    //   it(`:level[string]-[${item}]`, async () => {
-    //     const wrapper = mount({
-    //       render() {
-    //         return <QRCode level={item} value="https://tdesign.tencent.com/"></QRCode>;
-    //       },
-    //     });
-    //     expect(wrapper.find('.t-qrcode').attributes('level')).eq(item);
-    //   });
-    // });
-
     it(':size[number]', async () => {
       const size = 380;
       const wrapper = mount({
@@ -111,5 +99,34 @@ describe('QRCode', () => {
       await wrapper.setProps({ status: 'expired', statusRender });
       expect(statusRender).toBeCalled();
     });
+
+    it(':value[string] changes - canvas mode', async () => {
+      const wrapper = mount({
+        render() {
+          return <QRCode type="canvas" value="https://tdesign.tencent.com/"></QRCode>;
+        },
+      });
+
+      expect(wrapper.find('.t-qrcode').find('canvas').exists()).eq(true);
+      await wrapper.setProps({ value: 'https://github.com/Tencent/tdesign-vue-next' });
+      expect(wrapper.find('.t-qrcode').find('canvas').exists()).eq(true);
+    });
+
+    it(':value[string] changes - svg mode', async () => {
+      const wrapper = mount({
+        render() {
+          return <QRCode type="svg" value="https://tdesign.tencent.com/"></QRCode>;
+        },
+      });
+
+      expect(wrapper.find('.t-qrcode').find('svg').exists()).eq(true);
+      const initialPaths = wrapper.find('.t-qrcode').findAll('path');
+      expect(initialPaths.length).eq(2); // 背景path + 前景path
+
+      await wrapper.setProps({ value: 'https://github.com/Tencent/tdesign-vue-next' });
+      const updatedPaths = wrapper.find('.t-qrcode').findAll('path');
+      expect(updatedPaths.length).eq(2);
+      expect(wrapper.find('.t-qrcode').find('svg').exists()).eq(true);
+    });
   });
 });

src/qrcode/components/qrcode-svg.tsx

@@ -9,25 +9,27 @@ export default defineComponent({
   name: 'QRCodeSVG',
   props: QRCodeSubComponentProps,
   setup(props) {
-    const {
-      margin, cells, numCells, calculatedImageSettings,
-    } = useQRCode({
+    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 calculatedImageSettings = computed(() => qrCodeData.value.calculatedImageSettings.value);
+    const margin = computed(() => qrCodeData.value.margin.value);
+    const numCells = computed(() => qrCodeData.value.numCells.value);
     return {
       cellsToDraw,
       calculatedImageSettings,