vue小技巧 如何实现二维码生成功能

之前接触php时大部分二维码生成都是使用php生成，最近看了下vue觉得前端生成也是很方便，现在将vue使用 qrcodejs2 生成二维码的方式分享给大家。

首先准备好依赖（安装qrcodejs2）

准备需要使用的依赖项

npm install qrcodejs2 --save

使用依赖生成二维码

下面是所有的组件代码，这里需要注意的是，我们一定要在dom元素渲染之后再去执行二维码生成的功能，以保证我们的二维码能够正常生成并渲染到页面。

<template>
  <div class='app-about-us'>
    <div id="qrCode"
         ref="qrCodeDiv"></div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  name: '',
  data() {
    return {}
  },
  inject: ['reload'],
  created() {
    this.$nextTick(function() {
      this.mef()
    })
  },
  methods: {
    mef() {
      new QRCode(this.$refs.qrCodeDiv, {
        text: 'http://www.dearweb.com',
        width: 200,
        height: 200,
        colorDark: '#222', //二维码颜色
        colorLight: '#fff', //二维码背景色
        correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
      })
    }
  }
}
</script>
<style scoped lang='scss'>
</style>

最后生成的是base64格式图片。