前端Vue + qrcode实现二维码生成

后端接口会返回一串由数字和英文组合的字符串

bash 复制代码
getQRInviteCode() {
          // 清除上一次的二维码
          if (this.$refs.qrcode) {
            this.$refs.qrcode.innerHTML = ''; // 清除二维码方法
          }

          // 生成二维码(这里有个坑,一定要在 new关键字前面用 等于号,赋给一个变量,否则vue运行会报错)
          qrcode是HTML中的显示二维码的div
	          setTimeout(() => {
				this.qrcode = new QRCode(this.$refs.qrcode, {
	           	text: '', // 后端返回的二维码地址或者字符串
	            width: 100px,  // 二维码宽度 (不支持100%)
	            height: 100px, // 二维码高度(不支持100%)
	            colorDark:'#333333',//二维码颜色
	            colorLight:'#ffffff',//二维码背景色
	            correctLevel:QRCode.CorrectLevel.l,//容错率  L/M/H
	            render: 'canvas', // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
	          });
          },0)
        },
        this.$forceUpdate()强制刷新一下
相关推荐
Lee川4 小时前
Milvus 实战:当 RAG 遇上向量数据库,从"玩具 Demo"到"生产可用的"那一步
前端·数据库·人工智能
anOnion4 小时前
构建无障碍组件之Toolbar Pattern
前端·html·交互设计
惊鸿一博5 小时前
图标加载方式_zeroIcon_是否加前缀mdi
开发语言·前端·javascript
2501_940041745 小时前
前端工程化进阶:5个高交互与可视化项目提示词
前端
你很易烊千玺5 小时前
JS 异步 从零讲(大白话 + 真实场景 + 可运行案例)
前端·javascript·vue.js
华洛6 小时前
讲讲如何在传统产品中挖掘AI需求
javascript·产品经理·产品
why技术7 小时前
AI Coding开始进入第四个时代,我还没上车呢!
前端·人工智能·后端
大家的林语冰8 小时前
CSS 已死?DOM 性能黑洞!Pretext 排版革命让你在文本间跳舞,没有 DOM 也能纵享丝滑~
前端·javascript·css
vipbic8 小时前
我也该升级了,陪伴了我7年的博客
前端
Lee川8 小时前
RAG 实战:从一篇掘金文章出发,拆解检索增强生成的全链路
前端·人工智能·后端