二维码修改

1

package.json

@@ -43,6 +43,7 @@
     "object-diff": "0.0.4",
     "path-to-regexp": "2.4.0",
     "portal-vue": "^2.1.7",
+    "qrcanvas": "^3.1.2",
     "qrcodejs2": "0.0.2",
     "qs": "^6.8.0",
     "screenfull": "^5.1.0",

src/components/QrCode/index.vue

@@ -6,17 +6,17 @@
       :visible.sync="status"
       @close="onDialogClose"
       append-to-body
-      width="300px"
+      width="321px"
     >
       <div class="left-code">
-        <div  id="preview">
+        <div id="preview">
           <!--   -->
-        <vue-qr
+          <!-- <vue-qr
 
           :text="codeUrl"
           style="width: 100%"
           :margin="0"
-        ></vue-qr>
+        ></vue-qr> -->
         </div>
         <p class="code-url" v-if="codeUrl">
           <copy-text>{{ codeUrl }}</copy-text>
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import VueQr from "vue-qr";
+import { qrcanvas } from "qrcanvas";
 import copy from "copy-to-clipboard";
 import { toPng } from "html-to-image";
 export default {
@@ -51,9 +51,9 @@ export default {
       logo: require("@/assets/images/logo.png"),
     };
   },
-  components: {
-    VueQr,
-  },
+  // components: {
+  //   VueQr,
+  // },
   props: {
     value: {
       // 组件状态
@@ -123,6 +123,29 @@ export default {
   watch: {
     value(newValue) {
       this.status = newValue;
+      if (newValue) {
+        const image = new Image();
+        image.src = this.logo;
+        image.width=58
+        image.height=58
+        image.onload = () => {
+          const canvas = qrcanvas({
+            cellSize:5,
+            data: this.codeUrl,
+            padding: 8,
+            logo: {
+              image,
+            },
+          });
+          document.getElementById("preview").appendChild(canvas);
+        };
+      } else {
+        let firstDoc = document.getElementById("preview").firstChild;
+        if(firstDoc){
+           document.getElementById("preview").removeChild(firstDoc);
+        }
+
+      }
     },
     title(newValue, oldValue) {
       if (newValue != oldValue) {