Vue+Element-Ui项目中使用qrcodejs2将链接生成二维码

1. 下载安装包

npm i qrcodejs2 -S

2. 在要生成二维码的页面或组件内导入qrcodejs2

import QRCode from “qrcodejs2”;

3. 项目中使用

在html创建一个放置二维码的div

<div ref="qrCodeUrl"></div>

调用方法生成二维码

//将链接变成二维码图片creatQrCode() {var qrcode = new QRCode(this.$refs.qrCodeUrl, {text: this.text, // 需要转换为二维码的内容width: 150,height: 150,// render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）colorDark: "#000000", //二维码颜色colorLight: "#ffffff", //二维码背景色correctLevel: QRCode.CorrectLevel.H, //容错率，L/M/H});}

清除已生成的二维码（此代码根据项目情况调用）


this.$refs.qrCodeUrl.innerHTML = "";

注：如果在el-dialog中使用，由于dialog组件节点可能未生成的关系，建议将显示字段和生成二维码的方法放在一个方法里面，如下

//展示弹窗及二维码payQR() {//显示弹窗this.dialogVisible = true;//生成二维码字段的链接this.text = "xxxx";// 使用$nextTick确保数据渲染（这个方法表示页面的结构一定已经生成好了，这个时候就可以调用节点生成二维码）this.$nextTick(() => {//生成二维码的方法this.creatQrCode();});}

Vue+Element-Ui项目中使用qrcodejs2将链接生成二维码相关推荐

vue 中使用 QRCode.js 链接转二维码带中间图片
前言项目中需要一个链接转二维码的功能,找了一下决定使用QRCode.js(很久以前的插件了) 下载引入1. <div id="qrcode" ref="qrco ...
Vue中链接生成二维码
1.安装插件 npm install qrcodejs2 --save 2.导入组件 import QRCode from 'qrcodejs2' 3.页面中添加二维码 <div id=&quo ...
vue 根据链接生成二维码(功能实现)
今天同事问我一个问题,在vue项目中想要根据一个链接显示对应的二维码该怎么实现. 我前一段时间,有用apicloud项目生成二维码的功能,但是vue版本的没有处理过.百度后找到一个可行的方案: 大神实 ...
Vue 链接生成二维码
1.安装qrcodejs2 cnpm i qrcodejs2 --save 或者 npm i qrcodejs2 --save 2.在需要用的页面中引入 <div id="qrcode ...
vue2 qrcodejs2链接生成二维码
安装qrcodejs模块 npm i qrcodejs2 -S 样式文件 style.css .qrcode {padding-top: 0.21333333rem;padding-bottom: 0 ...
vue H5页面跳转微信小程序以及生成二维码跳转小程序
研究了两种H5跳转小程序的方法,同时携带参数 1. 手机浏览器打开H5页面,点击按钮拉起微信小程序 2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序为了开发方便,以上两种均借助了微信小程 ...
vue3 将文字或链接生成二维码 qrcode.vue
安装 npm install --save qrcode.vue 案例 vue3+ts 利用Popover 气泡卡片点击后弹窗,或是修改为鼠标触动弹框都可以还可以写css样式改变二维码与卡片样式[ ...
Laravel5中通过SimpleQrCode扩展包生成二维码实例
简介 Simple QrCode 是基于强大的Bacon/BaconQrCode库开发的适用于当前最流行的Laravel框架的一个扩展库.便于Laravel用户可以很方便地使用. 翻译我们在寻找可以 ...
在网页项目中集成扫码枪设备，实现二维码扫码识别实战
我寻寻觅觅,寻寻觅觅一个可以二次开发的扫码枪.然而,店小二总是告诉我:"这个--额--额--俺也不知道呢--".本文将一步一步实现在网页项目中集成扫码枪设备. 目录 1.项目背景 ...

Vue+Element-Ui项目中使用qrcodejs2将链接生成二维码

Vue+Element-Ui项目中使用qrcodejs2将链接生成二维码相关推荐

最新文章

热门文章