fix(qrcode): Fix the problem that the QR code cannot be dynamically generated (#974)

* fix: Fix the problem that the QR code cannot be dynamically generated * Fix the problem that the size of the QR code is automatically changed when dynamically generated

fix(qrcode): Fix the problem that the QR code cannot be dynamically generated (#974)
* fix: Fix the problem that the QR code cannot be dynamically generated * Fix the problem that the size of the QR code is automatically changed when dynamically generated
江麻妞 · GitHub
1 parent 14fb21d0
Showing 2 changed files with 20 additions and 7 deletions
src/components/Qrcode/src/Qrcode.vue
src/components/Qrcode/src/drawCanvas.ts
@@ -4,7 +4,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, watchEffect, PropType, ref, unref } from 'vue';
+  import { defineComponent, watch, PropType, ref, unref } from 'vue';
   import { toCanvas, QRCodeRenderersOptions, LogoType } from './qrcodePlus';
   import { toDataURL } from 'qrcode';
   import { downloadByUrl } from '/@/utils/file/download';
@@ -93,11 +93,16 @@
         });
       }
-      watchEffect(() => {
-        setTimeout(() => {
-          createQrcode();
-        }, 30);
-      });
+      // 监听参数变化重新生成二维码
+      watch(
+        props,
+        () => {
+          createQrcode()
+        },
+        {
+          deep: true,
+        }
+      )
       return { wrapRef, download };
     },
 import { toCanvas } from 'qrcode';
 import type { QRCodeRenderersOptions } from 'qrcode';
 import { RenderQrCodeParams, ContentType } from './typing';
-export const renderQrCode = ({ canvas, content, width = 0, options = {} }: RenderQrCodeParams) => {
+import { cloneDeep } from 'lodash-es';
+
+export const renderQrCode = ({
+  canvas,
+  content,
+  width = 0,
+  options: params = {}
+}: RenderQrCodeParams) => {
+  const options = cloneDeep(params)
   // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
   options.errorCorrectionLevel = options.errorCorrectionLevel || getErrorCorrectionLevel(content);