vue 使用QRcode生成二维码或在线生成二维码
Vue 生成 在线 二维码 Qrcode 使用
2023-09-27 14:29:10 时间
参考:https://blog.csdn.net/zhuswy/article/details/80267748
1.安装qrcode.js
npm install qrcodejs2 --save
2.页面中引入
import QRCode from 'qrcodejs2'
3.页面使用
<div id="qrcode" ref="qrcode"></div>
methods:{ qrcode () { let qrcode = new QRCode('qrcode', { width: 232, // 设置宽度 height: 232, // 设置高度 text: 'https://baidu.com' }) } } /* @ 在需要调用的地方 这样必须这样调用 否则会出现 appendChild null 就是id为qrcode的dom获取不到 返回结果为null */ this.$nextTick (function () { this.qrcode(); })
更简单直接的方法:
src = "http://qr.topscan.com/api.php?bg=ffffff&fg=000000&text=" + code; //code为券码
相关文章
- (尚052)+(尚053) Vue_源码分析_模板解析_大括号表达式
- Vue - 拖曳式可视化生成应用软件(适合迭代的基础架构、低代码平台)
- Vue Nuxt.js - 根据后端返回的唯一 ID / code,生成 “唯一“ 的推荐码、邀请码、订单号、加密路由、一串英文+数字长字符等 (支持反序列化原 ID 解码,逆向得出 ID 二者互转)
- Vue组件之间传值的几种方法 (直接上代码)
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- vue-element-admin完整项目实例
- Vue.js Ajax(axios)
- MyBatisPlus 最新版代码生成器(直接拿来就能用,包含自动生成 Vue 模版)
- 防止注册机,登录时-验证码图片的生成=前端vue+后端node
- vue-cli4构建项目,与vue-cli3构建项目的区别
- 详解vue组件的is特性:限制元素&动态组件
- springboot+vue在线答疑系统(源码+说明文档)
- Vue响应式原理及总结
- vue后台(五)
- 详解Vue的slot新用法
- flask+vue学习:关于如何处理列表所需的数据
- Vue学习第16天——全局事件总线$bus的理解
- Vue开发实例(03)之Vue项目引入element_ui
- Vue动态控制input的disabled属性的方法
- 【chatgpt】教你如何创建一个Vue脚手架