vite

vite-demo/package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chenfengyuan/vue-qrcode": "2",
     "ant-design-vue": "^2.2.8",
     "axios": "^0.26.1",
     "echarts": "^5.3.2",
@@ -19,11 +20,13 @@
     "md-editor-v3": "^1.11.9",
     "otplib": "^12.0.1",
     "pako": "^2.0.4",
-    "qrcode": "^1.5.1",
+    "qrcode": "1",
+    "qrcodejs2-fix": "^0.0.1",
     "sass": "^1.50.0",
     "scss": "^0.2.4",
-    "vue": "^3.2.25",
+    "vue": "3",
     "vue-json-excel": "^0.3.0",
+    "vue-qr": "^4.0.9",
     "vue-router": "^4.0.14",
     "vuex": "^4.0.2",
     "xlsx": "^0.17.0"

vite-demo/src/views/tool/digitalTokens/index.vue

 <template>
-   <div>数字令牌</div>
+    <div>数字令牌</div>
+    <p>VueQrcode</p>
+    <vue-qrcode value="otpauth://totp/吴远倍-业务(wuyb)?secret=GYPYZEHPJJFSEFZSPBMWZUXWLVCCWHEW&issuer=易电务云平台"
+                :options="{ width: 200 }"></vue-qrcode>
+    <p>QRCode</p>
+    <div style="width:200px;height:200px" id="qrCodeUrl"></div>
+    <p>vueQr</p>
+    <vueQr :text="qrCodeUrl" :size="150"></vueQr>
 </template>
 
 <script>
+    import VueQrcode from '@chenfengyuan/vue-qrcode';
+    import QRCode from 'qrcodejs2-fix'
+    import {nextTick} from 'vue'
+    import vueQr from 'vue-qr/src/packages/vue-qr.vue';
+    // https://github.com/fengyuanchen/vue-qrcode/tree/v1
+    // https://blog.csdn.net/AdminGuan/article/details/127855812
+    export default {
+        name: "index",
+        components: {
+            VueQrcode,
+            vueQr
+        },
+        setup() {
+            // let { secret, qrcodeUrl} = createSeedSecret('uuai','vite-demo')
+            // console.log(' secret, qrcodeUrl', secret, qrcodeUrl)
+            let QRCodeStyle = {
+                width: 200,
+                height: 200,
+            }
 
-export default {
-  name: "index",
-  setup(){
-    // let { secret, qrcodeUrl} = createSeedSecret('uuai','vite-demo')
-    // console.log(' secret, qrcodeUrl', secret, qrcodeUrl)
-    return {
 
+            nextTick(() => {
+                const qrCodeDom = document.getElementById('qrCodeUrl')
+                creatQrCode(qrCodeDom, 'otpauth://totp/吴远倍-业务(wuyb)?secret=GYPYZEHPJJFSEFZSPBMWZUXWLVCCWHEW&issuer=易电务云平台')
+            })
+
+            function creatQrCode(qrCodeDom, text) {
+                console.log(qrCodeDom);
+                new QRCode(qrCodeDom, {
+                    text: text || '',
+                    render: "canvas",
+                    width: QRCodeStyle.width,
+                    height: QRCodeStyle.height,
+                    colorDark: '#000000',
+                    colorLight: '#ffffff',
+                    correctLevel: QRCode.CorrectLevel.H
+                })
+            }
+
+            return {
+                qrCodeUrl: 'https://blog.csdn.net/AdminGuan', // 二维码的内容
+            }
+        }
     }
-  }
-}
 </script>
 
 <style scoped>