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.html和https://www.jianshu.com/p/d549dd71434b
老规矩留下微信号:yzh2030999zxy
网友评论