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都有相关支持的软件.之前我就想了解二维码是如何工作,最近因为工作需要使用相关技 ...
随机推荐
- phpmyadmin 数据库导出数据到excel(图文版)
查询到想要的数据后,点击上方或下方的"导出"按钮 格式选择"CSV for MS Excel" 如果快速导出的数据乱码,可以选择"导出方式" ...
- AcWing第78场周赛
今天想起来了,就补一下吧~ 第一题 商品分类 货架中摆放着 n 件商品,每件商品都有两个属性:名称和产地. 当且仅当两件商品的名称和产地都相同时,两件商品才视为同一种商品. 请你统计,货架中一共有多少 ...
- 学习ASP.NET Core Blazor编程系列十三——路由(完)
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 结合RocketMQ 源码,带你了解并发编程的三大神器
摘要:本文结合 RocketMQ 源码,分享并发编程三大神器的相关知识点. 本文分享自华为云社区<读 RocketMQ 源码,学习并发编程三大神器>,作者:勇哥java实战分享. 这篇文章 ...
- 【Hadoop面试】基础概念、HDFS、MapReduce、Yarn、实战
一.Hadoop概念及架构 1.是否看过Hadoop源码 2.正常工作的hadoop集群中hadoop都分别需要启动哪些进程,他们的作用分别是什么 3.hadoop和spark中的文件缓存方式 4.h ...
- 一定要用Photoshop?no!动手用Python做一个颜色提取器! ⛵
作者:韩信子@ShowMeAI Python3◉技能提升系列:https://www.showmeai.tech/tutorials/56 计算机视觉实战系列:https://www.showmeai ...
- 【Java】各种数据类型的元素数量
容易混,就算写多了也容易混... 数据类型 元素个数写法 备注 Stack s s.size() s的元素个数 二维数组m[][] m.length m的行数 二维数组m[][] m[0].lengt ...
- hashlib模块、subprocess模块、loggin日志模块及实战
hashlib加密模块 目录 hashlib加密模块 加密补充说明 subprocess模块 logging日志模块 日志的组成 日志配置字典 配置参数 1.何为加密 将明文数据处理成密文数据 让人无 ...
- Android的诞生
Android操作系统最初由Andy Rubin开发,刚开始主要支持手机,被Google收购后,对Android进行了改良,使其可以用于平板电脑等其它领域. 1.1.1 Android的发展史Andr ...
- sqlSession封装以及CRUD的实现
sqlSession封装以及CRUD的实现 封装MyBatisUtil dao 定义方法 映射文件写sql语句 daoimpl实现类 实现方法 test类测试方法 整体结构