1 npm install --save qrcodejs2
1 <template>
2 <!-- 二维码 -->
3 <div class="qrcode"><div id="qrcodeImg"></div></div>
4 </template>
5
6 <script lang="ts">
7 import { defineComponent, onMounted } from "vue";
8 import QRCode from "qrcodejs2";
9 export default defineComponent({
10 setup() {
11 onMounted(() => {
12 // 生成二维码
13 let url: string = ""; //扫描二维码时跳转页面的链接
14 if (process.env.NODE_ENV == "production") {
15 url = "http://1.116.33.31/login";
16 } else if (process.env.NODE_ENV == "development") {
17 url = "http://192.168.124.4:8080/login";
18 }
19 getrecode(url);
20 });
21 },
22 });
23 //生成二维码
24 const getrecode = (shareUrl: string) => {
25 const qrcodeImgEl: any = document.getElementById("qrcodeImg");
26 qrcodeImgEl.innerHTML = "";
27 let qrcode = new QRCode(qrcodeImgEl, {
28 width: 256,
29 height: 256,
30 colorDark: "#000000",
31 colorLight: "#ffffff",
32 correctLevel: QRCode.CorrectLevel.H,
33 });
34 qrcode.makeCode(shareUrl);
35 };
36 </script>
