与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能。
方式一:qrcode
- npm
1 |
|
- import
1 |
|
- 使用
<div class="qrcode" ref="qrCodeUrl"></div> <script> methods: { creatQrCode() { var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: 'xxxx', // 需要转换为二维码的内容 width: 100, height: 100, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H }) }, }, mounted() { this.creatQrCode(); }, </script>
- 样式(这里再提供一个给二维码添加边框的小技巧:如下图所示,我们生成的二维码是没有边框的,看起来不是很好看)
-
.qrcode{
display: inline-block;
img {
width: 132px;
height: 132px;
background-color: #fff; //设置白色背景色
padding: 6px; // 利用padding的特性,挤出白边
box-sizing: border-box;
}
}
就有了下面的效果:
方式二:vue-qr
- npm
1 |
|
- import
1 |
|
- 使用
-
// logoSrc为logo的url地址(使用require的方式);text为需要转换为二维码的内容 <vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr> <script> export default { name: "qecode", data() { return { imageUrl: require("../assets/logo.png"), } }, components: { vueQr }, }, } </script>