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;
    

    .

  • 相关阅读:
    【调试】关于F9
    【vue】vue变量定义的位置
    【js】MVVM模型
    RE最全面的正则表达式----数字篇
    Spider & CrawlSpider
    论小脚本的重要性
    论小脚本的简单性3
    论小脚本的简单性2
    论小脚本的简单性
    git的常用命令
  • 原文地址:https://www.cnblogs.com/crazycode2/p/12550979.html
Copyright © 2011-2022 走看看