qrcode.js生成二维码有一点问题，故不再推荐
=========================以下为原文 ======================
在一次开发中需要前端自己生成二维码图片,所以使用了qrcode.js 这个插件
第一步 下载插件
需要注意，这里下载的是qrcodejs2
cnpm install --save qrcodejs2
第二步，在组件中使用
<template>
<div>
<div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode -->
</div>
</template>
<script>
import QRCode from 'qrcodejs2' // 引入qrcode
export default {
name : 'test',
mounted () {
this.qrcode();
},
methods: {
qrcode() {
let qrcode = new QRCode('qrcode', {
width: 132,
height: 132,
text: 'https://www.baidu.com', // 二维码地址
colorDark : "#000",
colorLight : "#fff",
})
},
}
}
</script>
这里分享一个小技巧，通过qrcode生成的二维码本身是没有白边的，这样的二维码并不好看↓
默认二维码.png
如果想像这样生成一个有白边的二维码，是不是更好看一点，只需要通过css样式即可实现↓
有白边的二维码.png
废话不多说，上代码↓
<style lang='less'>
#qrcode {
display: inline-block;
img {
width: 132px;
height: 132px;
background-color: #fff; //设置白色背景色
padding: 6px; // 利用padding的特性，挤出白边
}
}
</style>
