美文网首页Web前端之路
React生成带logo的二维码

React生成带logo的二维码

作者: 燕自浩 | 来源:发表于2020-03-23 15:36 被阅读0次
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类型
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;

(注意:value值最好不要带中文,否则会出现不能扫描的情况)
本文章综合https://www.cnblogs.com/crazycode2/p/12550979.htmlhttps://www.jianshu.com/p/d549dd71434b

老规矩留下微信号:yzh2030999zxy

相关文章

网友评论

    本文标题:React生成带logo的二维码

    本文链接:https://www.haomeiwen.com/subject/jgywyhtx.html