新知·react使用qrcode.react生成二维码

刘听风 396 2022-08-09

NPM引入

npm i qrcode.react
文档地址:https://www.npmjs.com/package/qrcode.react

import React from 'react';
import QRCode from 'qrcode.react';
import defaultHeaderImg from '@/assets/images/common/bg_list_1_1@2x.png'  //本地图片

export default function Page() {
    return (
        <>
            <QRCode
                id="qrCode"                         //ID
                value="https://86s.cc"          //二维码扫描出得网址
                size={200}                             // 二维码的大小
                level='H'                               //二维码安全等级   
                fgColor="#000000"              // 二维码的颜色
                style={{ margin: 'auto' }}       //二维码样式
                imageSettings={{                  // 二维码中间的logo图片 
                    src: defaultHeaderImg,     //中间LOGO图片
                    height: 50,                         //高度
                    width: 50,                          //宽度
                    excavate: true,                  // 中间图片所在的位置是否镂空
                }}
            />
        </>
    )
}

文中代码生成的二维码
文中代码生成的二维码