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都有相关支持的软件.之前我就想了解二维码是如何工作,最近因为工作需要使用相关技 ...
随机推荐
- 基于python的数学建模---Fuzzy C-Means(模糊C均值聚类)
簇数的确定: 要用到k-means里面的轮廓系数 基于python的数学建模---轮廓系数的确定 - 坤丶 - 博客园 (cnblogs.com) 模糊c的代码 import copy import ...
- json与字符串的互转
在spring框架中当ajax请求需要返回json数据时,我们只需要在@RequestMapping后面加上@ResponseBody,即可为我们返回想要的json. 下面我们讲解json与字符串的互 ...
- Sqoop的介绍和安装
sqoop下载地址:https://share.weiyun.com/woVbfnfS 或者 https://archive.apache.org/dist/sqoop/1.99.7/ Sqoop简介 ...
- 【Shell案例】【取指定列的方式$5 p[6],双括号运算、awk、管道运算】8、统计所有进程占用内存大小的和
假设 nowcoder.txt 内容如下:root 2 0.0 0.0 0 0 ? S 9月25 0:00 [kthreadd]root 4 0.0 0.0 0 0 ? I< 9月25 0:00 ...
- 【重难点】函数式接口、函数式编程、匿名内部类、Lambda表达式、语法糖
一.函数式接口 1.概念 仅有一个抽象方法的接口 适用于函数式编程(Lambda表达式) 常见:Runnable.Comparator<>.生产型接口Producer的get方法.消费型接 ...
- typora软件下载跟安装
typora软件介绍 typora是一款文本编辑器 是目前非常火爆的文本编辑器 [下载地址](Typora 官方中文站 (typoraio.cn)) 安装操作 pj链接 注意:不要更新!!! 安装 路 ...
- JavaScript中的防抖与节流-图文版
01.防抖还是节流 防抖 与 节流 目的都是避免一定时间内,大量重复的操作造成的性能损耗.因此原理也类似,都是阻止过多的事件执行,只保留一部分来执行.适用场景略有不同,也有交叉,动手练习一遍就懂了. ...
- 开局一张图,构建神奇的 CSS 效果
假设,我们有这样一张 Gif 图: 利用 CSS,我们尝试来搞一些事情. 图片的 Glitch Art 风 在这篇文章中 --CSS 故障艺术,我们介绍了利用混合模式制作一种晕眩感觉的视觉效果.有点类 ...
- [编程基础] Python lambda函数总结
Python lambda函数教程展示了如何在Python中创建匿名函数.Python中的匿名函数是使用lambda关键字创建的. 文章目录 1 介绍 1.1 简单使用 1.2 Python lamb ...
- toastr.js 便捷弹框怎么用?怎么本地化?
〇.简介 toastr.js 是一个非常简洁的弹窗消息插件,主要原因就是其脚本和样式文件较小. 并且可以根据自己的需求,修改样式文件,可以应用在多种不同的场景. https://codeseven.g ...