Element UI +Vue页面生成二维码的方法

目录

一、方法一 采用qrcodejs2生成

1.1、安装二维码插件qrcodejs2

//在终端输入npm命令,安装二维码插件

powershell 复制代码
npm install qrcodejs2 --save

1.2、在vue文件中,引入生成二维码插件

powershell 复制代码
import QRCode from 'qrcodejs2';        //在vue文件中,引入生成二维码插件

1.3、构建二维码对象qrCodeDiv

全部代码

html 复制代码
<!-- 生成绑定微信二维码界面 -->
    <el-dialog
      title="微信扫码绑定用户"
      :visible.sync="isShowCard"
      width="400px"
      center
      :before-close="jieBangClose"
    >
      <!-- 定义一个展示二维码的div -->
      <div style="display: flex; justify-content: center">
        <!-- 二维码对象可以通过 ref 绑定 -->
        <div id="qrCode" ref="qrCodeDiv"></div>
      </div>
    </el-dialog>
 
// 1. 方法调用 
bangding(row){
      let memberId = row.memberId;
      this.isShowCard = true;
      if(this.ids != null){
        memberId = this.ids[0];
      }
      this.createQRCode(memberId);
}
//2. 具体的绑定方法
createQRCode(id){
      this.$nextTick(()=>{
      this.$refs.qrCodeDiv.innerHTML = '';//二维码清除
      alert(id)
      new QRCode(this.$refs.qrCodeDiv, {
          text: "id="+ id,//二维码链接,参数是否添加看需求
          width: 200,//二维码宽度
          height: 200,//二维码高度
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L //容错率,L/M/H
        });
      })
    }

一、方法二 -采用qrcode生成

2.1、安装qrcode

powershell 复制代码
yarn add qrcode

2.2、页面引入

html 复制代码
import QRCode from 'qrcode';

2.3、方法里边使用

html 复制代码
getQRCodeUrl(){  
 QRCode.toDataURL(
 'hello world',{
 color: {
 dark:"#010599FF",
 light:"#FFBF60FF"
           }
         }
      )
       .then((url) => {
 // 获取到url后即可在页面使用--二维码图片
 console.log('url', url)
       })
       .catch((e) => {
 console.log('e', e)
       });
 }

2.4、options

名称 类型 默认值 说明
errorCorrectionLevel String M 错误处理级别。可选值:low, medium, quartile, high or L, M, Q, H
maskPattern Number 可选值:0, 1, 2, 3, 4, 5, 6, 7
margin Number 4
scale Number 4
width Number
color.dark String #000000ff
color.light String #ffffffff

三、方法三 vue-qr

3.1、安装

powershell 复制代码
yarn add vue-qr

3.2、页面引入

javascript 复制代码
import VueQr from 'vue-qr'

3.3、组件增加vue-qr

javascript 复制代码
components: { 
	VueQr 
},

3.4、template使用

logoSrc中间logo

javascript 复制代码
<vue-qr style="width:200px;height:200px;" logoSrc="https://image.dandelioncloud.cn//dist/img/NoSlightly.png" text="Hello world!" :size="200"></vue-qr>

3.5、options

Parameter Explanation
text Contents to encode. 欲编码的内容
correctLevel Correct Level 0-3 容错级别 0-3
size Width as well as the height of the output QR code, includes margin. 尺寸, 长宽一致, 包含外边距
margin Margin to add around the QR code, default 20px. 二维码图像的外边距, 默认 20px
colorDark Color of "true" blocks. Works only when both colorDark and colorLight are set. (BYTE_DTA, BYTE_POS, BYTE_AGN, BYTE_TMG) 实点的颜色
colorLight Color of empty space, or "false" blocks. Works only when both colorDark and colorLight are set. (BYTE_EPT) 空白区的颜色
components Controls the appearances of parts in the QR code. Read section ComponentOptions to learn more. 阅读 ComponentOptions 了解更多信息
bgSrc Background url to embed in the QR code. 欲嵌入的背景图地址
gifBgSrc Gif background url to embed in the QR code, If gifBackground is set, backgroundImage will be ignored. This option will affects performance. 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor Background color 背景色
backgroundDimming Color mask to add above the background image. Helpful when having problems with decoding. 叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc Logo url to embed at the center of generated QR code 嵌入至二维码中心的 LOGO 地址
logoScale Value used to scale the logo image. Larger value may result in decode failure. Size of the logo equals to logoScale*(size-2margin). Default is 0.2. 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale(size-2*margin), 默认 0.2
logoMargin White margin that appears around the logo image. Default is 0. LOGO 标识周围的空白边框, 默认为0
logoBackgroundColor Logo background color, need set logo margin. Logo 背景色,需要设置 logo margin
logoCornerRadius Radius of the logo's corners.Default is 0 LOGO 标识及其边框的圆角半径, 默认为0
whiteMargin If set to true, a white border will appear around the background image. Default is true. 若设为 true, 背景图外将绘制白色边框
dotScale Value used to scale down the data dots' size. (0 < scale < 1.0) default 1 数据区域点缩小比例,默认为1
autoColor If set to true, the dominant color of backgroundImage will be used as colorDark. Default is true. 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true
binarize If set to true, the whole image will be binarized with the given threshold, or default threshold if not specified. Default is false. 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值
binarizeThreshold Threshold used to binarize the whole image. Default is 128. (0 < threshold < 255) 二值化处理的阈值
callback Data URI of the generated QR code will be available here. 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
bindElement If set to true, the generated QR will bind to a HTML element automatically. Default is true. 指定是否需要自动将生成的二维码绑定到HTML上, 默认是true
相关推荐
m0_748247551 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255022 小时前
前端常用算法集合
前端·算法
真的很上进2 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203982 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2342 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1233 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~4 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语4 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg4 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全