vue生成二维码

这里介绍两种vue生成二维码的方法

1. QRcode
2. vue-qr

vue-qr比QRcode功能多在可以在中间加logo

QRcode

npm

npm install qrcodejs2

import

在所需页面导入

import QRCode from 'qrcodejs2'

use

<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>

vue-qr

npm

npm install vue-qr --save

use

<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
<script>
  import vueQr from 'vue-qr'
  export default {
    name: "qecode",
    data() {
      return {
        imageUrl: require("@/assets/images/sweepCode/icon_back@2x.png"),
      }
    },
    components: {
      vueQr
    },
    },
  }
</script>

常用属性介绍

text	二维码内容
size	二维码宽高大小，因为是正方形，所以设一个参数即可
margin	默认边距20px，不喜欢的话自己设为0
colorDark	实点的颜色，注意要和colorLight一起设置才有效
colorLight	空白的颜色，注意要和colorDark一起设置才有效
logoSrc	二维码中间的图，这个是好东西，设置一下显得专业点
logoScale	中间图的尺寸
dotScale	那些小点点的大小范围【0-1】

要注意一点，引用的img路径一定要加require

借鉴地址