首页 > 其他分享 >react中二维码生成

react中二维码生成

时间:2023-01-13 09:55:05浏览次数:50  
标签:npm ... 生成 react 二维码 import awesomeqr

参考文档:

https://blog.csdn.net/weixin_45022563/article/details/124843593

 

awesomeqr/react

案例:

注意需要给父级div设置高宽

下载:

yarn add @awesomeqr/react

# OR using npm

npm install --save @awesomeqr/react

import React from 'react'
import { AwesomeQRCode } from "@awesomeqr/react";//引入二维码生成库

export default function CollectApp() {
    return (
        <div style={{ "height": "400px", "width": "100%" }}>
            线上采集app下载2
            <AwesomeQRCode
                options={{
                    text: "测试测试测试,这的app下载内容,测试测试测试,这的app下载内容这的app下载内容测试测试测试,这的app下载内容",//二维码内容
                    // size: 100,//大小
                    logoImage: require("../../../../media/picture/jfjyewm.png"),//二维码中间的图片
                    logoScale: 0.3, // 二维码中间logo大小
                    logoCornerRadius: 0.3, // 二维码中间logo圆角
                    // colorLight: "rgba(159,255,255,0)", // 二维码背景颜色
                }}
                onStateChange={(state) => {
                    switch (state) {
                        case "working":
                            //工作 ...
                            break;
                        case "idle":
                            // 闲置...
                            break;
                    }
                }}
            />
        </div>
    )
}

 

标签:npm,...,生成,react,二维码,import,awesomeqr
From: https://www.cnblogs.com/pzj123/p/17048642.html

相关文章

  • Response生成验证码
    类代码:packagecom.yin;importjavax.imageio.ImageIO;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.htt......
  • Gradle生成jar文件的名称与版本问题
    在使用Gradle对SpringBoot进行项目管理时,项目打包的jar文件名称没有版本号,且文件名称后面都加入了plain字样。如何让Gradle打包生成的jar文件符合常见的命名要求。实际上在......
  • React Context 详细介绍(状态共享、数据传递)
    Context是什么?Context提供了一个无需为每层组件手动添加props,就能在组件树间进行数据传递的方法。在一个典型的React应用中,数据是通过props属性自上而下(由父及子)进......
  • 一笔画路径生成(c++版)
    一笔画路径生成(c++)练习图的遍历、回溯新建一个OnePen类;使用setNodeNum()方法设置节点数量;使用setNodeJoin()设置节点连线;执行drawLine()方法即可得出该图的一笔画......
  • rocketMQ中通过消息查看生成者
    在控制台,通过topic或者消息,默认只展示了消费者列表和具体的消费者,没有展示生产者的IP如何查看呢其实这是数据有,但是控制台没有展示后台:消息:输入topic查询最近一个小时......
  • React面试宝典
    React面试宝典一、组件基础梳理组件设计原理与思路分析和解决问题的技巧1.React原理......
  • Java项目生成电脑桌面快捷脚本(Mysql数据)
    一、场景说明在项目中,可能有些同事需要查询线上数据库的数据,但又不能泄露密码给他们,手写一个程序方便他们查询。二、Java代码需要引入mysql驱动包:downloads......
  • python生成应用程序的块截方式
    代码:importos,winshellfromwin32com.clientimportDispatchpath=r"D:/workspace/wwwroot82/pyjiankong/dist/test.lnk"#Pathtobesaved(shortcut)target......
  • C#-生成Excel文件
    引入命名空间:usingMicrosoft.Office.Interop.Excel;usingSystem.Runtime.InteropServices;创建Sheet:varapp=newMicrosoft.Office.Interop.Excel.Applic......
  • 二维码QRCode
    一、二维码介绍 二维码的应用越来越多,开发中会经常使用,这里主要从二维码的介绍、客户端生成与服务器端生成三个方面讲解二维码。二维码又称二维条码,常见的二维码为QRCode,Q......