Vue.Js如何生成二维码?
vue.js的本质还是js嘛!
所以,有个库就好!
一个调用,二维码就出来了。
安装以来酷
npm install qrcodejs2 --save
使用的页面引入
import QRCode from 'qrcodejs2';
创建一个方法,适当的时候触发即可
挖一个坑
<div id="qrCodeContainer" ref="qrCodeContainer"></div>
methods: {
createQrCode() {
new QRCode(this.$refs.qrCodeContainer, {
text: 'xxx',
width: 150,
height: 150,
colorDark: "#666666", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H
})
}
}
Nuxt.js生成二维码
引用
https://cdn.sunofbeaches.com/qrcodejs/qrcode.min.js
可以保存一份到自己的服务器里去。
在head里
添加
script: [
.....
{
src: 'https://cdn.sunofbeaches.com/qrcodejs/qrcode.min.js'
}
......
],
__dangerouslyDisableSanitizers: ['script']//不会对"...这些字符做转义了
以上可以单页面引入,也可以全局引入.
然后创建二维码码
let qrCodeContainer = document.getElementById('moment-detail-qrcode');
qrCodeContainer.innerHTML = '';
//console.log(qrCodeContainer);
//console.log('set up qr code...');
let qrcode = new QRCode(qrCodeContainer, {
width: 150,//设置宽高
height: 150
});
qrcode.makeCode('https://www.sunofbeach.net/m/' + momentId);
这样子,二维码码就创建到对应的坑里了。