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>