网页嵌入二维码， 已经稀松平常。前端插入二维码，通常会被推荐QRCode.js这个库。
一般情况下，这个库运行起来轻松+愉快。不过，如果网页恰好使用vue.js来布局，恐怕要犯傻了：
同一张网页，这是我在引入vue.js之前的样子：
正常显示的二维码
但是之后在引入vue.js的时候就傻了：
白茫茫一片
说明两个库之间，可能存在一些冲突。
别想了，网络上给出的教程，啥“vue中引入QRCode.js”之类，普遍都没什么效果。
换句话说，vue.js和QRcode.js，二选一。
当然了，这两个库相比之下，QRCode肯定会被放弃。毕竟它只是个二维码工具，而vue涉及网页主体，改造的成本不可同日而语。
另外，vue本身也有一个二维码工具库，就是vue-qrcode.js。简单好用，学习成本1小时左右。文档移步→vue-qrcode.js
这样，vue中使用二维码的问题，自然就解决了~
不过，如果就连这1小时也不想花，就想用QRCode.js呢？
取巧的办法也不是没有。
QRCode官方文档给出的二维码生成方式是这样的：
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>
实际上，当你通过js创建QRCode以后，这个<div>下，会创建两个新的子元素：
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;" title="http://jindo.dev.naver.com/collie">
<canvas width="100" height="100" style="display: none;"></canvas>
<img alt="Scan me!" src="data:image/png;base64,iVBORw0KGgoAA(图片省略了……)" style="display: block;">
</div>
看到没？img标签下，有二维码图片的真实地址。那么把这个地址本身提取出来，就可以了！
以下，是粗糙的示范：
<body>
<input id ="QR_url" type="text" placeholder="这里输入待生成二维码地址">
<input type="button" value="点击生成二维码" onclick ="make_QR()">
<img id = "qr_code" src='' >
</body>
<script>
var QR_div = document.createElement('div'); //这里生成一个虚拟DOM，让QRCode在这里执行。
var qrcode = new QRCode(QR_div,{
height:120,
width:120,
});
var qr_gen = document.getElementById('qr_code');
function make_QR(){
var temp = $("#QR_url").val();
qrcode.makeCode(temp); //qr_code在虚拟DOM里生成二维码
qr_gen.src = QR_div.childNodes[1].src; //这里，把虚拟DOM里的二维码图片地址提取出来，赋值给html里的图片标签
};
</script>
这样，就算在vue框架下， QRCode也能使用了~
网友评论