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 实现二维码生成的更多相关文章

  1. JavaScript二维码生成——qrcode.js

    在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...

  2. 二维码生成插件qrious及网站扫码登录的一些理解

    什么是二维码 ​ 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型. ...

  3. 二维码生成插件qrious

    1.qrious是基于canvas的纯JS二维码生成插件 1.1什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的B ...

  4. simple go web application & 二维码生成 & 打包部署

    go语言简易web应用 & 二维码生成及解码 & 打包部署 转载请注明出处: https://www.cnblogs.com/funnyzpc/p/10801476.html 前言(闲 ...

  5. [开源]C#二维码生成解析工具,可添加自定义Logo

    二维码又称 QR Code,QR 全称 Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的 Bar Code 条形码能存更多的信息,也能表示更多的数据类型:比如:字 ...

  6. 聊聊 Web 项目二维码生成的最佳姿势

    在设计和实现的过程之后,你永远不知道部署上去的程序会已什么样的姿势运行. 本篇借一次生成二维码逻辑的不同实现,阐述 Web 项目中二维码生成的正确姿势. 文中如有批量,欢迎各位看客老爷拍砖.试运行前5 ...

  7. .NET 二维码生成(ThoughtWorks.QRCode)

    引用ThoughtWorks.QRCode.dll (源代码里有) 1.简单二维码生成及解码代码: //生成二维码方法一 private void CreateCode_Simple(string n ...

  8. iOS开发 二维码生成

    基于libqrencode的二维码生成 + (void)drawQRCode:(QRcode *)code context:(CGContextRef)ctx size:(CGFloat)size { ...

  9. PHP二维码生成的方法(google APi,PHP类库,libqrencode等)

    原文地址: http://blog.csdn.net/liuxinmingcode/article/details/7910975 ================================== ...

  10. Android 二维码 生成和识别(附Demo源码)

    今天讲一下目前移动领域很常用的技术——二维码.现在大街小巷.各大网站都有二维码的踪迹,不管是IOS. Android.WP都有相关支持的软件.之前我就想了解二维码是如何工作,最近因为工作需要使用相关技 ...

随机推荐

  1. hwlog----hwlog_adaptor.go

    // Copyright(c) 2021. Huawei Technologies Co.,Ltd. All rights reserved.// Package hwlog provides the ...

  2. 关于linux更改root用户下面的鼠标样式

    前言 这几天一直研究关于 lightmd 显示管理器(也就是刚进入系统的用户登录界面)的主题配置问题,我发现鼠标样式和登录个人用户的鼠标样式不一样(之前我也发现了,懒得捣鼓)今天抽出时间研究了一下,这 ...

  3. day16 正则表达式 & 反射 & Java内存模型(JMM)

    day16 class 1)获取一个类的所有信息(变量.方法.构造方法) 2)创建类对象newInstance() Field 1)访问变量或给变量赋值 Method 1)执行具体类对象的指定方法 3 ...

  4. 【java】【File】用File相关类写一个小工具,完成从指定目录下抽取指定文件并复制到新路径下完成重命名的功能

    今日份代码: import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import java.io.*; i ...

  5. pandas中groupby的使用

    一.缘由 在爬取大量的数据之后,需要对数据进行分组的处理,于是就使用了groupby,但是我需要的并不是分组之后数据的聚合分析,我需要的是原生的某些数据.但是却找不到网上的相关案例.于是,我就自己尝试 ...

  6. 02.JavaScript学习笔记1

    1.强制类型转换 当使用加号进行运算时,会将数字强制转换为字符串,然后再进行运算. const year = '1991'; console.log(year + 18); console.log(t ...

  7. Docker的作用

    绝大部分应用,开发者都可以通过docker build创建镜像,通过docker push上传镜像,用户通过docker pull下载镜像,用docker run运行应用. 用户不需要再去关心如何搭建 ...

  8. React报错之Element type is invalid

    总览 产生"Element type is invalid -- expected a string (for built-in components) or a class/functio ...

  9. python 实现RSA公钥加密,私钥解密

    from Crypto.PublicKey import RSA from Crypto.Cipher import PKCS1_v1_5 as Cipher_pkcs1_v1_5 from Cryp ...

  10. texlive安装与vscode环境配置

    环境 系统:windows10 texlive下载 下载地址: 官网:http://tug.org/texlive/ 清华镜像源: https://mirrors.tuna.tsinghua.edu. ...