zoukankan      html  css  js  c++  java
  • react 项目里 生成带logo的二维码

    1.安装模块

    npm install qrcode-react
    // 或者
    yarn add qrcode-react

    2.属性介绍

    size             二维码大小  number
    bgColor       二维码背景色string (CSS颜色)"#FFFFFF"
    fgColor        颜色 string (CSS颜色)
    logo             图片地址 string
    logoWidth    二维码宽度 number 
    logoHeight   二维码高度  number

    项目代码:(注意:value值最好不要带中文,否则会出现不能扫描的情况)
    3.页面调用

    /***
     * 扫码预览
     */
    import React, { PureComponent } from 'react';
    import QRCode from 'qrcode-react';
    import './index.less';
    
    class QrcodeModal extends PureComponent {
      constructor(props) {
        super(props);
        this.state = {}
      }
    
      render() {
        return (
          <div>
            <QRCode
              size={150}
              value={`https://www.baidu.com`}
              logo={`https://www.baidu.com/img/baidu_jgylogo3.gif`}
              logoWidth={50}
              logoHeight={50}
            />
          </div>
        );
      }
    }
    
    export default QrcodeModal;
    

    .

  • 相关阅读:
    2021冬季学期有感与评价
    Scala变量和数据类型
    Scala运算符
    pytorch基本使用
    Vue组件
    Scala函数式编程
    Python中的运算符
    Scala流程控制
    Scala环境搭建
    用于测试GRPC服务的UI工具BloomRpc
  • 原文地址:https://www.cnblogs.com/crazycode2/p/12550979.html
Copyright © 2011-2022 走看看