From fe4eae37146068f01ba08f033e0c2e8bd03e48b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=9F=E9=BA=BB=E5=A6=9E?=
 <50100681+jiangmaniu@users.noreply.github.com>
Date: Sun, 25 Jul 2021 09:01:09 +0800
Subject: [PATCH] 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
---
 src/components/Qrcode/src/Qrcode.vue    | 17 +++++++++++------
 src/components/Qrcode/src/drawCanvas.ts | 10 +++++++++-
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/Qrcode/src/Qrcode.vue b/src/components/Qrcode/src/Qrcode.vue
index beb80ad5..3c5c2763 100644
--- a/src/components/Qrcode/src/Qrcode.vue
+++ b/src/components/Qrcode/src/Qrcode.vue
@@ -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 };
     },
diff --git a/src/components/Qrcode/src/drawCanvas.ts b/src/components/Qrcode/src/drawCanvas.ts
index 67fc4c87..e8416369 100644
--- a/src/components/Qrcode/src/drawCanvas.ts
+++ b/src/components/Qrcode/src/drawCanvas.ts
@@ -1,7 +1,15 @@
 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);