前端生成二维码
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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步