Vue+Element-ui项目前端生成二维码

二维码介绍引入qrcodejs依赖项目二维码实现效果展示The end

二维码介绍

二维码实际上也是网址中的一种，只不过二维码可以方便用户，用户可以不用输入网址，通过手机浏览器扫描对应的二维码即可进入对应的网站

引入qrcodejs依赖

首先需要在项目的控制台安装依赖 npm install qrcodejs2 -S 然后在需要用到二维码的组件中引入 import QRCode from 'qrcodejs2'

项目二维码实现

页面代码

<!-- 二维码弹框--> <el-dialog title="手机考试二维码" :visible.sync="qrCodeDialogVisible" width="40%" @opened="qrCodeCreate" :before-close="qrCodeHandleClose"> <div style="margin-left: 10%"> <div id="qrCode" ref="qrCode"></div> </div> <span slot="footer" class="dialog-footer"> </span> </el-dialog>

JS代码

//关闭弹框清除二维码 qrCodeHandleClose() { this.qrCodeDialogVisible = false; this.qrCode = ''; document.getElementById('qrCode').innerHTML = ''; }, //创建二维码 qrcode(url) { this.qrCode = new QRCode('qrCode', { text: url, width: 400, height: 400 }) }, qrCodeCreate(){ let url = 'http://39.105.4.20/#/?id=' + this.examId this.$nextTick(() => { this.qrcode(url); }) } //二维码显示 qrCodeOpen(val) { this.qrCodeDialogVisible = true; }

效果展示

The end

本次分享到这结束了