wodax-login-qrcode.react
Version:
login component with qrcode for WodaX applications
177 lines (131 loc) • 4.31 kB
Markdown
# WodaX 扫二维码登录组件
[](https://npmjs.org/package/wodax-login-qrcode.react)
[](https://npmjs.org/package/wodax-login-qrcode.react)
## 安装
```bash
$ npm i wodax-login-qrcode.react
# 或
$ yarn add wodax-login-qrcode.react
```
## 功能特性
* 支持HTML5 EventSource 获取实时反馈；
* 支持自定义二维码显示样式；
* 支持外接API方式获取二维码；
* 支持自定义渲染接口；
* 支持调试日志输出；
* 高性能低占用率
* 高级可定制
## 使用说明
### Demo
```jsx harmony
import WodaXLoginWithQrCode from 'wodax-login-qrcode.react';
const Example = () => (
<WodaXLoginWithQrCode />
);
```
### 当前可用的Props
```js
WodaXLoginWithQrCode.defaultProps = {
className: `wodax-login-with-qrcode`,
Style: {},
// 是否开启日志调试
debugEnable: false,
// 可选项
options: {
// 基础参数: {eventSource使用}
// 是否使用EventSource来重新获取最新QrCode
useEventSourceForFetchQrCode: false,
clientEventSource: {
// EventSource 主要服务url
url: `https://stream.wikimedia.org/v2/stream/recentchange`,
// EventSource 附带参数
params: {},
// EventSource 可以处理的消息类型
messageTypes: [`message`],
// withCredentials
withCredentials: false,
// EventSource 是否保存所有
saveAllEvents: false,
},
// 基础参数: {Title使用}
title: `打开App，扫码登录`,
titleClassName: `qr-login-title`,
appLogo: ``,
// QrCode 二维码配置
qrCodeConfig: {
renderAs: `canvas`,
size: 128,
bgColor: `#FFFFFF`,
fgColor: `#000000`,
level: `L`,
includeMargin: false,
},
qrCodeContainerOpacity: {
min: 0.01,
max: 1,
},
// 提示信息
toolTipContainerClassName: `qr-login-tooltip`,
toolTipContainerStyle: {
padding: '4px',
position: 'absolute',
},
codeOutWorkText: `二维码已失效`,
loginFailedText: `登录失败`,
loginSuccessText: `登录成功`,
qrCodeGetFailedText: `获取二维码失败`,
scanCompleteText: `扫描成功! 请在手机上确认登录`,
// 基础参数: {刷新区域，重新获取二维码}
// 是否一直显示刷新区域
refreshContainerShowEveryTime: false,
refreshContainerProps: {
style: {
padding: '4px',
position: 'absolute',
marginTop: '40px',
},
},
// 点击刷新
refreshButtonCaption: `请点击刷新`,
refreshButtonElement: `button`,
refreshButtonProps: {
style: {
padding: '4px',
},
},
// 基础参数: {实时信息接收处理}
// 是否默认显示sse回显信息
showSSEMessage: false,
},
// 数据请求接口，可以覆盖
fetchQrCodeHandler: _default.fetchQrCodeHandler,
// 数据反馈接口。外接应用，可以自己处理所有来自服务器的消息
onReceiveMessageHandler: _default.onReceiveMessageHandler,
// 渲染接口, 可以覆盖，重新写
titleRender: _default.titleRender,
qrCodeRender: _default.qrCodeRender,
toolTipRender: _default.toolTipRender,
additionLayerRender: _default.additionLayerRender,
refreshQrCodeRender: _default.refreshQrCodeRender,
sseMessageRender: _default.sseMessageRender,
};
```
## 在线文档运行
```bash
$ npm run website:run
# 或
$ yarn website:run
```
## 开发维护
### 构建
```bash
# 建议在兼容Linux的终端中运行，如Windows的WSL、或者Git Bash
$ yarn build
```
## 授权信息
[MIT](./LICENSE)