首页 前端知识 Vue如何生成二维码 qrcode.js2

Vue如何生成二维码 qrcode.js2

2024-05-29 10:05:05 前端知识 前端哥 255 80 我要收藏

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 },

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10000.html
标签
评论
发布的文章

使用 mapstructure 解析 json

2024-06-05 13:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!