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;
.
