vue+element+qrcode 生成二维码_vue+element生成二维码

今天做项目遇到了一个需求，就是管理后台生成签到的二维码，app端扫码获取培训班、班级、课程等等，然后就想到了qrcode.

vue项目使用qrcodejs2生成二维码

1，导入第三方插件

npm install –save qrcode

2，在页面上引入

import QRCode from 'qrcodejs2'

3.dom

<div class="qrcode" ref="qrCodeUrl">二维码位置</div> 

4.JavaScript

methods: {
  // 展示二维码
  payOrder () {
    this.innerVisible = true
    // 二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接
    this.qrcode = 'www.baidu.com'
    // 使用$nextTick确保dom渲染之后渲染二维码
    this.$nextTick(() => {
      this.crateQrcode()
    })
  },
  // 生成二维码
  crateQrcode () {
    var qr = new QRCode('qrcode', { // eslint-disable-line no-unused-vars // 不写这个会报错
      width: 150,
      height: 150, // 高度
      text: this.qrcode // 二维码内容
      // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
      colorDark : '#000000',
      colorLight : '#ffffff',
      correctLevel : QRCode.CorrectLevel.H // 容错率 L/M/H
    })
    
  },
  // 关闭弹框,清除已经生成的二维码
  closeCode () {
    this.$refs.qrcode.innerHTML = ''
  }
}