记录使用qrcode生成二维码

第一步npm安装qrcode

npm install qrcode

第二部创建code组件,做了简单的预览,很粗糙

/******* 二维码显示 */
<template>
  <div>
    <canvas ref="qrcodeCanvas" @click="showPic"></canvas>
    <el-dialog :visible.sync="picShow" width="30%" center :before-close="handleClose">
      <el-image :src="imageLink"  class="elImage"></el-image>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'QrCodeComponent',
  props: {
    text: {
      type: String,
      required: true
    }
  },
  data(){
    return{
      imageLink:"",
      picShow:false
    }
  },
  mounted() {
    this.generateQRCode()
  },
  methods: {
    generateQRCode() {
      const canvas = this.$refs.qrcodeCanvas
      QRCode.toCanvas(canvas, this.text, error => {
        if (error) console.error(error)
      })
      // this.imageLink = canvas.toDataURL('image/png');
    },
    handleClose(){
      this.picShow = false
      this.imageLink = ''
    },
    showPic(){
      const canvas = this.$refs.qrcodeCanvas;
      this.imageLink = canvas.toDataURL('image/png');
      this.picShow = true
    },
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-dialog{
  .el-dialog__body{
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .elImage{
      width: 400px !important;
      height: 400px !important;
    }
  }
}
</style>

第三部引入组件

import QrCodeComponent from "./components/qrCodeComponent.vue";

第四部使用组件,传入的值为你二维码内的值

 <qr-code-component :text="info" />

 注:自用,可能会有bug,只是用做一个记录,思路来源于百度