引入qrcode.js
<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
创建二维码显示位置
id 作为 定位标识文章来源：https://www.toymoban.com/news/detail-792312.html
<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文章来源地址https://www.toymoban.com/news/detail-792312.html
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: ["取消按钮"]
});
}
到了这里，关于HTML+JS + layer.js +qrcode.min.js 实现二维码弹窗的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
