在项目中需要生成二维码,那么出了后端进行处理,前端能不能自己生成二维码呢,答案是可以的,我们只需要调用第三方库就可以了,目前主流的前端二维码库有qrcode.js,vue-qr,下面我来展示一个调用Qrcode.js库结合vue来生成二维码的例子
首先用npm安装
`npm install qrcodejs2 --save`
然后引入
`import QRCode from 'qrcodejs2'`
在方法中创建生成二维码的方法并调用
`methods: {
creatQrCode() {
var qrcode =new QRCode(this.$refs.qrCodeUrl, {
text:'https://www.yunliyunwai.cn/',// 需要转换为二维码的内容
width: 100, //宽度
height: 100, //高度
colorDark:'#000000', //主体颜色(黑色部分)
colorLight:'#ffffff', //背景颜色(白色部分)
correctLevel: QRCode.CorrectLevel.H //(二维码辨识度)
})
},
},
mounted() {
this.creatQrCode();
},