Vue如何生成二维码 qrcode.js2

QRCode.js是一个二维码生成javascript库；支持跨浏览器的HTML5 Canvas和表格标签的DOM操作；并且不依赖其它的库或拓展。

官网地址：https://davidshimjs.github.io/qrcodejs/

安装方式：（qrcode.js有两个版本我用的是第二版）

npm i qrcodejs2复制

实现效果：

 实现思路：

将canvas部分拆分成组件 放入弹窗实现不同链接生成不同的二维码

html：

 <el-button type="text" @click="seeCode(scope.row)">查看下载二维码</el-button>
 <el-dialog title="扫码下载对应版本APP" :visible.sync="dialogVisible" width="300px">
            <QrCode :id="'QrCode'" :codeUrl="codeUrl" />
        </el-dialog>复制

JS

seeCode(item) {
            //拼接访问下载链接  请求地址 + 请求路径
            this.codeUrl = this.define.APIURl + JSON.parse(item.fileid_name)[0].url
            //打开弹窗
            this.dialogVisible = true
        },复制

组件拆分：

 
<template>
  <div style="width: 100%;height: 100%;" :id="id" :ref="id"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      qrcode: ''
    }
  },
  props: {
    id: {
      type: String,
      required: true
    },
    codeUrl: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '200'
    },
    height: {
      type: String,
      default: '200'
    },
    colorDark: {
      type: String,
      default: '#000000'
    },
    colorLight: {
      type: String,
      default: '#ffffff'
    }
  },
  watch: {
    codeUrl(newText) {
      this.createQrcode()
    }
  },
  mounted() {
    this.createQrcode()
  },
  methods: { 
    // 有新的二维码地址了，先把之前的清除掉
    createQrcode() {
      if (this.qrcode) { 
        this.$refs[this.id].innerHTML = ''
      }
      this.qrcode = new QRCode(this.$refs[this.id], {
        text: this.codeUrl,
        width: this.width,
        height: this.height,
        colorDark: this.colorDark,
        colorLight: this.colorLight,
        correctLevel: QRCode.CorrectLevel.H,
      })
    },
  }
}
</script>复制

页面引入组件：

import QrCode from './QrCode.vue'
components: {QrCode },复制