Vue实现具备扫描和查看数据的二维码

npm install qrcode.js qrcodelib --save

<template>
  <div>
    <canvas ref="qrcodeCanvas" :width="qrcodeWidth" :height="qrcodeHeight"></canvas>
  </div>
</template>
<script>
import QRCode from 'qrcode.js'
export default {
  name: 'QRCode',
  props: {
    qrcodeData: {
      type: String,
      required: true
    },
    qrcodeWidth: {
      type: [Number, String],
      default: 200
    },
    qrcodeHeight: {
      type: [Number, String],
      default: 200
    }
  },
  mounted () {
    // 在组件挂载后，我们会调用 qrcode.js 的 API，来实现生成二维码，并将其绘制在 canvas 上。
    const qrcode = new QRCode(this.$refs.qrcodeCanvas, {
      text: this.qrcodeData,
      width: this.qrcodeWidth,
      height: this.qrcodeHeight
    })
  }
}
</script>

mounted () {
  const qrcode = new QRCode(this.$refs.qrcodeCanvas, {
    text: this.qrcodeData,
    width: this.qrcodeWidth,
    height: this.qrcodeHeight
  })
  // 为二维码添加一个点击事件，当我们点击二维码时，会弹出一个对话框，显示QRCode中的信息
  this.$refs.qrcodeCanvas.onclick = () => {
    const result = qr_decode(qrcode)
    if (result) {
      alert(result)
    }
  }
}

import qrcode from 'qrcodelib'
function qr_decode (qrcode) {
  // 从 canvas 标签获取 QRCode 的像素矩阵
  const imageData = qrcode._el.getContext('2d').getImageData(0, 0, qrcode._htOption.width, qrcode._htOption.height).data
  try {
    // 解码二维码中的信息
    const result = qrcode.decode(imageData)
    return result.text
  } catch (e) {
    alert('QRCode 解码失败')
    return false
  }
}

<template>
  <div>
    <canvas ref="qrcodeCanvas" :width="qrcodeWidth" :height="qrcodeHeight"></canvas>
  </div>
</template>
<script>
import QRCode from 'qrcode.js'
import qrcode from 'qrcodelib'
export default {
  name: 'QRCode',
  props: {
    qrcodeData: {
      type: Object,
      required: true
    },
    qrcodeWidth: {
      type: [Number, String],
      default: 200
    },
    qrcodeHeight: {
      type: [Number, String],
      default: 200
    }
  },
  mounted () {
    // 将 this.qrcodeData 转换成字符串格式，用于生成 QRCode
    const qrcodeString = JSON.stringify(this.qrcodeData)
    // 使用 qrcode.js 生成 QRCode
    const qrcode = new QRCode(this.$refs.qrcodeCanvas, {
      text: qrcodeString,
      width: this.qrcodeWidth,
      height: this.qrcodeHeight
    })
    // 为二维码添加点击事件，当用户点击二维码时，显示出行程数据
    this.$refs.qrcodeCanvas.onclick = () => {
      const result = this.$data.qrcode.decode(qrcode)
      if (result) {
        alert(JSON.parse(result))
      }
    }
  },
  data () {
    return {
      qrcode: qrcode
    }
  }
}
</script>