vue + element-ui + qrcodejs2 实现二维码生成
1、在所在项目下安装插件
npm i qrcodejs2
2、在需要生成二维码的页面引入qrcodejs
import QRCode from 'qrcodejs2'
3、使用
<el-button size="mini" type="primary" icon="el-icon-picture-outline" round @click="GenerateQRCode()">生成二维码</el-button></div>
<div id="qrcode" ref="qrcode"></div>
回调函数
// 生成二维码
GenerateQRCode () {
document.getElementById('qrcode').innerHTML = '' // 防止一直点击按钮重复生成二维码
const qrcode = new QRCode('qrcode', {
width: 200, // 二维码宽度,单位像素
height: 200, // 二维码高度,单位像素
text: this.softLink, // 生成二维码的链接
})
console.log('二维码信息:', qrcode)
},
}
vue + element-ui + qrcodejs2 实现二维码生成的更多相关文章
- JavaScript二维码生成——qrcode.js
在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...
- 二维码生成插件qrious及网站扫码登录的一些理解
什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型. ...
- 二维码生成插件qrious
1.qrious是基于canvas的纯JS二维码生成插件 1.1什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的B ...
- simple go web application & 二维码生成 & 打包部署
go语言简易web应用 & 二维码生成及解码 & 打包部署 转载请注明出处: https://www.cnblogs.com/funnyzpc/p/10801476.html 前言(闲 ...
- [开源]C#二维码生成解析工具,可添加自定义Logo
二维码又称 QR Code,QR 全称 Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的 Bar Code 条形码能存更多的信息,也能表示更多的数据类型:比如:字 ...
- 聊聊 Web 项目二维码生成的最佳姿势
在设计和实现的过程之后,你永远不知道部署上去的程序会已什么样的姿势运行. 本篇借一次生成二维码逻辑的不同实现,阐述 Web 项目中二维码生成的正确姿势. 文中如有批量,欢迎各位看客老爷拍砖.试运行前5 ...
- .NET 二维码生成(ThoughtWorks.QRCode)
引用ThoughtWorks.QRCode.dll (源代码里有) 1.简单二维码生成及解码代码: //生成二维码方法一 private void CreateCode_Simple(string n ...
- iOS开发 二维码生成
基于libqrencode的二维码生成 + (void)drawQRCode:(QRcode *)code context:(CGContextRef)ctx size:(CGFloat)size { ...
- PHP二维码生成的方法(google APi,PHP类库,libqrencode等)
原文地址: http://blog.csdn.net/liuxinmingcode/article/details/7910975 ================================== ...
- Android 二维码 生成和识别(附Demo源码)
今天讲一下目前移动领域很常用的技术——二维码.现在大街小巷.各大网站都有二维码的踪迹,不管是IOS. Android.WP都有相关支持的软件.之前我就想了解二维码是如何工作,最近因为工作需要使用相关技 ...
随机推荐
- ThinkPhp5 自定义异常处理类
在项目的开发过程中异常抛出尤为重要不仅能够做出友好提示帮助掩盖我们伟大的程序员们尴尬的瞬间,还能做到提示开发人员代码白编写的错误,下面进行自定义异常抛出类,纯属个人理解,希望大家指正 首先在框架中我们 ...
- 【OpenStack云平台】安装Centos操作系统
视频教程:https://live.csdn.net/v/236820 1.环境准备 准备实验所需要的环境,需要安装VMware Workstation.使用的系统镜像为CentOS-7.5-x86_ ...
- C温故补缺(二):volatile
volatile 参考:CSDN volatile也是一个类型修饰符,被其修饰的变量意味着可以被某些编译器未知的因素修改,如操作系统,硬件,线程等. 当遇到volatile修饰的变量时,编译器对访问该 ...
- DRF认证流程及源码分析
认证 前言 用户验证用户是否合法登陆. 部分内容在DRF视图的使用及源码流程分析讲解,建议先看讲解视图的这篇文章. 使用流程 认证使用的方法流程如下: 自定义认证类,继承BaseAuthenticat ...
- day07 方法重写&super、this、static关键字&JVM的类加载顺序题目
day07 方法重写 1)重写发生在子父类当中 2)方法名.参数列表.返回值均相同 3)重写的方法,方法体或者访问控制修饰符不同 4)子类方法的访问权限不能缩小,比如父类是int,子类重写权限不能是b ...
- 【实战】Hadoop安装01-伪分布式-Pseudo
Hadoop安装-伪分布式-Pseudo 〇.所需资料 一.前置环境安装 1.包含内容 (1)安装 虚拟机安装.系统安装 (2)配置 ip.host.主机名配置 关闭防火墙及selinux SSH免密 ...
- SLM6500电磁干扰认证设计PCB
SLM6500 是一款面向5V交充适配器的2A离子电池充电器.它是采用1.5MHz固定频率的步降压型转换器,利用芯片内部的功率晶体管电池进行涓流.恒流和恒压充电.充电电流可用外部电阻编程设定,持续充电 ...
- 使用 Visual Studio 2022 调试Dapr 应用程序
使用Dapr 编写的是一个多进程的程序,使用Visual Studio 调试起来可能会比较困难,因为 Visual Studio 默认只会把你当前设置的启动项目的启动调试. 好在有Visual Stu ...
- 图解B树及C#实现(2)数据的读取及遍历
目录 前言 查询数据 算法说明 代码实现 查询最值 算法说明 代码实现 B树的遍历 算法说明 代码实现 Benchmarks 总结 参考资料 前言 本文为系列文章 B树的定义及数据的插入 数据的读取及 ...
- python之字典(dict)创建与使用
字典(dict) 在其他语言中被称为哈希映射(hash map)或者相关数组,它是一种大小可变的键值对集,其中的key.value都是python对象. 特别注意: 1.字典中的key不能重复,key ...