react 基于qrcode.react生成颜色不同 , 样式不同的二维码


实现效果: 



1 首先在react中 , 导入下载qrcode.react

npm install qrcode.react

2 在react中导入使用 , 并导入ui样式

import QRcode1 from '@/assets/images/QRcode1.png'
import QRcode2 from '@/assets/images/QRcode2.png'
import QRcode3 from '@/assets/images/QRcode3.png'
import QR1 from '@/assets/images/QR1.png'
import QR2 from '@/assets/images/QR2.png'
import QR3 from '@/assets/images/QR3.png'import QRCode from 'qrcode.react'


3 具体实现

        const qrCodeValue = 'https://postimg.cc/jnsdQndk' // 这里可以设置二维码内容,目前是我放的自己的照片哈哈哈...也可以改成'111'都可以 (https://postimages.org/)这个图片转url的免费网址很不错!!!<div className=''>              // 用盒子包起来Radio.Group才能切换<Radio.Group onChange={onChange2} value={value2}><Radio style={{ fontSize: 16 }} value={1}><divclassName=''style={{width: 120,height: 120,borderRadius: 8,border: '1px solid #ccc',display: 'flex',alignItems: 'center',justifyContent: 'center'}}><img src={QRcode1} width={100} height={100} id='avatar' /></div></Radio><Radio style={{ fontSize: 16 }} value={2}>...如上</Radio><Radio style={{ fontSize: 16 }} value={3}>...如上</Radio></Radio.Group></div>// 手机二维码区域<divclassName='QRcode'style={{width: 266,height: 266,background:value2 === 1? `url(${QR1})  0% 0% / 266px 266px`  // 这种写法保证切换后图片尺寸不丢失: value2 === 2? `url(${QR2})  0% 0% / 266px 266px`: value2 === 3? `url(${QR3})  0% 0% / 266px 266px`: `url(${QR1})  0% 0% / 266px 266px`,backgroundSize: '266px 266px',backgroundRepeat: 'no-repeat'}}><QRCodevalue={qrCodeValue}className='qrcode'style={{width: 200,height: 200,zIndex: 100,position: 'relative'}}level={'L'} // 可选,可以接受7,15,25,30程度的容错级别,例如'L', 'M', 'Q', 'H'bgColor='transparent' // 设置二维码背景为透明fgColor='white' // 这样才能让二维码样式跟着背景色改变/><divclassName='qrcode-mask'style={{background:value2 === 1? `#d2a135`     // 设置背景色,让二维码的颜色跟着背景色走: value2 === 2? `#239ae9`: value2 === 3? `#d2a135`: `#d2a135`}}/><divclassName='qrcode-mask bottom'style={{background:value2 === 1? `#b5273c`: value2 === 2? `#239ae9`: value2 === 3? `#b5273c`: `#b5273c`}}/></div>


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/5191.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt客服端开发的组件库

Qt 是一个功能丰富的跨平台 C 应用程序框架&#xff0c;它包含了许多用于不同目的的组件库。以下是一些主要的 Qt 组件库&#xff0c;这些库为开发者提供了广泛的工具和功能&#xff0c;以便构建复杂的应用程序。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&a…

二、再识VUE-MVVM

一、初识VUE 二、再识VUE-MVVM 三、VUE数据代理 MVVM Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters。 ViewModel 一个同步 Model 和 View 的对象。在 Vue.js…

综合性练习(后端代码练习1)——加法计算器

目录 一、准备工作 二、约定前后端交互接口 1、概念介绍 2、需求分析 3、接口定义 请求参数 响应数据 三、服务器代码 四、前端页面代码 五、运行测试 遇到问题如何解决&#xff1f; 需求&#xff1a;输入两个整数&#xff0c;点击 “点击相加” 按钮&#xff0c;显…

计算机服务器中了mkp勒索病毒怎么办,mkp勒索病毒解密数据恢复流程

网络技术的不断应用与发展&#xff0c;为企业的生产运营带来了极大便利&#xff0c;越来越多的企业依赖网络开展各项工作业务&#xff0c;网络也大大提升了企业的生产运营效率&#xff0c;但网络是一把双刃剑&#xff0c;在为企业提供便利的同时&#xff0c;也为企业的数据安全…

M2 Mac mini跑Llama3

前言 在4-19左右&#xff0c;Meta 宣布正式推出下一代开源大语言模型 Llama 3&#xff1b;共包括 80 亿和 700 亿参数两种版本&#xff0c;号称 “是 Llama 2 的重大飞跃”&#xff0c;并为这些规模的 LLM 确立了新的标准。实际上笔者早就体验过&#xff0c;只不过自己电脑没什…

238 基于matlab的水平轰炸弹道的求解

基于matlab的水平轰炸弹道的求解&#xff0c;列出轰炸弹道方程组并利用龙格库塔法解算弹道方程。设计中包含了二维弹道与三维弹道的计算&#xff0c;并都绘制了弹道运动轨迹&#xff0c;最终还将整个题目集中在一个图形用户界面&#xff08;GUI&#xff09;上。程序已调通&…

Upload-labs 靶场通关解析(上)

前言 文件上传漏洞是一种常见的网络安全漏洞&#xff0c;存在于许多Web应用程序中。攻击者利用这个漏洞可以上传恶意文件到目标服务器&#xff0c;从而执行各种恶意操作&#xff0c;如执行恶意代码、获取敏感信息、控制服务器等。 文件上传漏洞的原理是&#xff0c;Web应用程…

Llama 3 ——开源大模型Llama 3从概念到使用

概述 Meta公司自豪地宣布推出其最新的开源大型语言模型——Llama 3&#xff0c;这是一款专为未来AI挑战而设计的先进工具。Llama 3包含两个不同参数规模的版本&#xff0c;以满足多样化的计算需求&#xff1a; 8B版本&#xff1a;优化了在消费级GPU上的部署和开发流程&#xf…

【设计模式】抽象工厂模式(Abstract Factory Pattern)

目录标题 抽象工厂设计模式详解1. 介绍2. 结构3. 实现步骤3.1 创建抽象产品接口3.2 创建具体产品类3.3 创建抽象工厂接口3.4 创建具体工厂类 4. 好处与优点5. 坏处与缺点6. 适用场景7. 总结 抽象工厂设计模式详解 1. 介绍 抽象工厂模式是一种创建型设计模式&#xff0c;它提供…

学生管理系统[Python语言]

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 学生管理系统是计算机专业最基础的一个作业&#…

算法设计优化——起泡排序

文章目录 0.概述1 起泡排序&#xff08;基础版&#xff09;1.1 算法分析1.2 算法实现1.3 重复元素与稳定性1.4 复杂度分析 2 起泡排序&#xff08;改进版&#xff09;2.1 目标2.2 改进思路2.3 实现2.4 复杂度分析 3 起泡排序&#xff08;改进版2&#xff09;3.1 目标3.1 改进思…

edge 入门基础了解使用

随着Windows 11的发布&#xff0c;Microsoft Edge也迎来了新的更新和改进。作为一名长期使用Edge的用户&#xff0c;我不仅注意到了这些表面的变化&#xff0c;还深入研究了Edge在Windows 11上的新特性和潜在优势。 快捷方式 查找框 在Microsoft Edge浏览器中&#xff0c;按…

C语言——通讯录实现

一、介绍 本文只是对于结构体类型的练习。 只是简单的静态通讯录实现&#xff0c;没有具体的UI界面&#xff0c;只有一些简单的功能&#xff0c;同时也比较粗糙&#xff0c;有很多地方没有经过足够的打磨。 二、源码 本项目包含三个文件&#xff1a; test.c/cpp #include…

Typora中设置文字颜色

在Typora中设置文字颜色的三种方法如下&#xff1a; 方法一&#xff1a;使用内联公式 开启使用内联公式。依次点击“文件”→“偏好设置”&#xff08;或使用快捷键Ctrl逗号&#xff09;&#xff0c;在弹出的窗口中选择“Markdown”&#xff0c;然后勾选“内联公式”&#xf…

基于docker-compose使用虚拟机搭建redis集群

代码实现 新建文件 docker-compose-redis.yml&#xff0c;复制以下代码 version: 2.2services:redis-node1:image: redis:5.0restart: alwayscommand: redis-server --port 7000 --cluster-enabled yes --cluster-config-file /data/nodes.conf --appendonly yesports:- &quo…

智能穿戴终端设备安卓主板方案_MTK平台智能手表PCBA定制开发

新移科技智能手表方案兼容WiFi、BLE、2~5G等多种通信能力。支持多个功能模块&#xff0c;包括&#xff1a;通话、计步、定位、睡眠监测、心率监测、血氧监测等。智能手表通过滑动与功能性按键提供高度直观的体验感受&#xff0c;从腕间即可掌控日常生活。形态支持定制包括&…

安全架构概述

安全架构是确保网络环境中的数据、系统和用户安全的关键组成部分&#xff0c;它涉及到多种技术和策略的综合应用。基本内容主要包括以下几个方面&#xff1a; 1. 访问控制与身份验证 &#xff1a;确保只有经过验证的用户或系统可以访问特定资源&#xff0c;常用技术包括多因素…

MySQL从入门到高级 --- 4.约束

文章目录 第四章&#xff1a;4.MySQL约束4.1 主键约束4.1.1 添加单列主键4.1.2 添加多列主键(联合主键)4.1.3 通过修改表结构添加主键4.1.4 删除主键约束4.1.5 自增长约束特点 4.1.6 指定自增字段初始值 - 创建表时指定4.1.7 指定自增字段初始值 - 创建表之后4.1.8 delete与tru…

如何配置 Prettier 配置文件,确保其中的文件 glob 模式能够正确包含 postcss.config.js 文件

如何配置 Prettier 配置文件&#xff0c;确保其中的文件 glob 模式能够正确包含 postcss.config.js 文件 要配置 Prettier 以确保其文件 glob 模式能够正确包含 postcss.config.js 文件&#xff0c;您可以按照以下步骤操作&#xff1a; 确认 Prettier 配置文件的存在&#xf…

商城数据库88张表结构(十五)

DDL 57.后台权限表 CREATE TABLE wang_privileges (privilegeId int(11) NOT NULL AUTO_INCREMENT COMMENT 自增ID,menuId int(11) NOT NULL COMMENT 父ID,privilegeCode varchar(20) NOT NULL COMMENT 权限代码,privilegeName varchar(30) NOT NULL COMMENT 权限名称,isMenu…