首页 > 其他分享 >vue3使用qrcodejs2-fix生成背景透明的二维码

vue3使用qrcodejs2-fix生成背景透明的二维码

时间:2024-03-21 17:04:58浏览次数:25  
标签:CorrectLevel text fix qrcodejs2 二维码 vue3 QRCode

qrcodejs官方仓库:GitHub - davidshimjs/qrcodejs: Cross-browser QRCode generator for javascript

qrcodejs2-fix 是一个用于生成QR码的JavaScript库,使用的时候先安装,然后通过设置前景色和背景色可以控制显示的二维码效果。想生成透明背景的二维码也可以,我通过下面配置前景色和背景色实现了下面的效果:背景透明

    new QRCode(document.getElementById('blueCode'), {
        text: blueUrl, // 扫码后显示的内容, 如果页面链接, 扫码后会直接跳转到链接
        width: 200, //二维码宽
        height: 200, //二维码高
        colorDark: '#ffffff',
        colorLight: '#ffffff00',  // 透明背景
    })

安装和使用

安装

npm install qrcodejs2-fix

引入:

import QRCode from 'qrcodejs2-fix';

在页面中定义容器:

<div id="code"></div>

定义生成二维码的函数:

const getCode = () => {
  document.getElementById("code").innerHTML = ""; //清空标签内原有数据,防止多次点击生成多个二维码
  new QRCode(document.getElementById("code"), {
    text: '000000'
  });
};

 调用函数:

<a-button @click="getCode">点击获取二维码</a-button>

QRCode参数说明

参数说明默认值
text需要编码的文字内容-
width图像宽度256
height图像高度256
colorDark前景色#000000
colorLight背景色#ffffff
correctLevel容错级别,可设置为:QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.HQRCode.CorrectLevel.L
typeNumber二维码类型(1~40,输入 0 以自动检测)4

标签:CorrectLevel,text,fix,qrcodejs2,二维码,vue3,QRCode
From: https://blog.csdn.net/weixin_44786530/article/details/136815208

相关文章

  • VUE3学习笔记
    参考链接https://blog.csdn.net/m0_66100833/article/details/134294781生命周期setup():这是一个新的入口点,在beforeCreate和created之前调用onBeforeMount/onMounted:组件挂载前/后的生命周期钩子。onBeforeUpdate/onUpdated:组件更新前/后的生命周期钩子。onBeforeUnmount/onU......
  • 解决position:fixed导致下层组件覆盖问题
    [解决position:fixed导致下层组件覆盖问题-掘金](https://juejin.cn/post/6986935474635931656)问题描述当上层组件固定(多见于导航栏的css样式)时,易造成下层组件被覆盖的问题。我们来写一个案例,当fixed样式未被使用时,我们的组件样式如下:<!DOCTYPEhtml><htmllang="en"><he......
  • vite+vue3+vuex 加密
    1.安装JSEncrypt  npminstalljsencrypt2.加密方法//加密算法import{JSEncrypt}from'jsencrypt';//加密functionencryptText(text){ constpublicKey='MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCh5Nk2GLiyQFMIU+h3OEA4UeFbu3dCH5sjd/sLTxxvwjXq7JLqJbt2rC......
  • 尚硅谷Vue3入门到实战,最新版vue3+TypeScript前端开发教程
    1.创建Vue3工程npmcreatevue@latest或者npminitvue@latest输入项目名和需要的工具后进入项目如果项目报错使用命令安装Node.js的项目依赖包npmi启动vue项目,查看项目是否创建完成npmrundev直接删掉src然后创建src文件夹,在该文件夹中创建main.ts和App.vue文件......
  • VUE3 十种组件通信的方式(附详细代码)
    props用途:可以实现父子组件、子父组件、甚至兄弟组件通信父组件<template><div><Son:money="money"></Son></div></template><scriptsetuplang="ts">importSonfrom'./son.vue'import{re......
  • VUE3 ECharts5 快速上手(附详细步骤)
    安装pnpminstallecharts引入EChartsimport*asechartsfrom'echarts';设置容器注意:虽然echarts可以在配置时设置宽高,但还是推荐在配置前直接为容器设置宽高<template><divid="main"class="echart-style"></div></template><style......
  • 大模型主流微调训练方法总结 LoRA、Adapter、Prefix-tuning、P-tuning、Prompt-tuning
    大模型主流微调训练方法总结LoRA、Adapter、Prefix-tuning、P-tuning、Prompt-tuning概述大模型微调(finetuning)以适应特定任务是一个复杂且计算密集型的过程。本文训练测试主要是基于主流的的微调方法:LoRA、Adapter、Prefix-tuning、P-tuning和Prompt-tuning,并对它们进行......
  • pinia——vue3的状态管理工具
    简介Pinia是Vue的专属状态管理库,它允许你跨组件或页面共享状态。主要优点Vue2和Vue3都支持,这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。pinia中只有state、getter、action,抛弃了Vuex中的Mutation,Vuex中mutation一直都不太受小伙伴们的待见,pinia直接抛弃它了,这无疑......
  • VsCode中高效书写Vue3代码的插件
    Vue-Official(原Volar)就是原先的Volar,现已弃用。Vue-Official提供的功能:语法高亮:Vue-Official扩展可以为Vue单文件组件(.vue文件)中的HTML、CSS和JavaScript部分提供语法高亮,使代码更易于阅读和编写。代码片段:Vue-Official扩展提供了丰富的Vue.js相关的......
  • 【Vue3】组件通信以及各种方式的对比
    方式一:props「父」向「子」组件发送数据父组件:定义需要传递给子组件的数据,并使用v-bind指令将其绑定到子组件的props上。<template><child-component:message="parentMessage"/></template><scriptsetup>importChildComponentfrom'./ChildComponent.......