HTML+JS + layer.js +qrcode.min.js 实现二维码弹窗

引入qrcode.js

<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>

创建二维码显示位置

id 作为 定位标识

<a class="btn btn-primary" @click="showCAD"  >显示二维码</a>
<div id="qcodeLayer" style="display:none"><div id="qrcode" style="width:200px; height:200px;margin: 15px auto;"></div>
</div>

编写JS

由于我框架中引入了VUE ，所以 我是直接写在了VUE的方法中触发的,并引入layer弹窗js
关于layer弹窗详细使用方法可以去H-ui官网查看
https://www.h-ui.net/lib/layer.js.shtml

showCAD:function(){var documentTemp = document.getElementById("qrcode");var len = documentTemp.childNodes.length;//保证每次只显示一个二维码for(var i = len-1;i>=0;i--) {       // 从后往前documentTemp.removeChild(documentTemp.childNodes[i]); }var qrcode = new QRCode(document.getElementById("qrcode"), {width: 200,height: 200});qrcode.clear();qrcode.makeCode("自定义二维码内容");layer.open({type: 1,skin: 'layui-layer-molv',title: "弹窗标题",area: ['400px', '400px'],shadeClose: false,content: jQuery("#qcodeLayer"),btn: ["取消按钮"]});}