这是一个react组件库，里面包含Toast组件、数字滚动NumberAnimation组件（老虎机效果）、图片懒加载LazyImage组件、Loading组件、Popup弹出层组件、Collapse折叠面板组件、数字动画组件、List组件，支持ts类型检查。
安装
npm install lei-react-lib
Popup组件的参数：
| 参数名 | 类型 | 默认值 | 说明 | 是否必传 |
|---|
| showPop | boolean | false | 是否显示Popup组件 | 是 |
| popCallBack | function | () => {} | Popup组件的关闭方法 | 是 |
| bgColor | 字符串类型 | rgba(0,0,0,0.8) | Popup组件的背景色 | 否 |
| clickClose | boolean | false | 点击遮罩是否关闭 | 否 |
| showClose | boolean | false | 是否显示关闭按钮 | 否 |
| animPos | 字符串类型 | Bottom | Popup组件弹出位置，可选值Left、Top、Bottom、Right | 否 |
| isAutoClose | boolean | false | Popup组件是否自动关闭 | 否 |
| duration | number | 2500 | Popup组件自动关闭时间 | 否 |
| children | ReactNode | | Popup组件中包含的内容 | 是 |
// 例子
import { Popup } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/index.css'
<Popup
showPop={isshow}
popCallBack={() => {}}
bgColor="rgba(0,0,0,0.8)"
clickClose={true}
showClose={true}
animPos="Bottom"
isAutoClose={true}
duration={2500}
>
<div>这是内容</div>
</Popup>
Collapse组件的参数：
| 参数名 | 类型 | 默认值 | 说明 | 是否必传 |
|---|
| isOpen | boolean | false | 是否显示Collapse组件内容 | 是 |
| children | ReactNode | | Collapse组件中包含的内容 | 是 |
// 例子
import { Collapse } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/index.css'
<Collapse isOpen={isshow}>
<div>这是内容</div>
</Collapse>
CountTo组件(须版本 >= 0.0.5)：
| 参数名 | 类型 | 默认值 | 说明 | 是否必传 |
|---|
| start | number | 0 | 动画开始值 | 是 |
| end | number | 100 | 动画结束值 | 是 |
| duration | number | 2500 | 动画持续时间 | 否 |
| decimals | number | 0 | 展示的小数位数，如果传了decimals，则以该值为准，否则会取endVal的小数位数 | 否 |
| onEnd | function | () => {} | 动画结束回调函数 | 否 |
| isFormat | boolean | true | 是否进行千分位转化 | 否 |
| formatNumber | function | (num) => num.toLocaleString() | 千分位转化函数，默认使用toLocaleString,仅在isFormat为true时生效，可自定义格式化函数 | 否 |
// 例子
import { CountTo } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/index.css'
<CountTo start={10.45} isFormat={false} duration={1200} end={5080.89} />
List组件(须版本 >= 0.0.8)：
| 参数名 | 类型 | 默认值 | 说明 | 是否必传 |
|---|
| items | Array | | 列表数据源 | 是 |
| height | Number | 页面可视区域的高 | 列表高度 | 否 |
| buffer | Number | 10 | 提前加载数据量 | 否 |
| itemHeight | Number | | 列表项高度 | 是 |
| loadMore | function | | 滚动到底部加载更多数据的回调 | 否 |
| renderItem | function | | 列表项渲染函数 | 是 |
| noText | String | 暂无数据 敬请期待~ | 数据列表为空时的提示文案 | 否 |
| noImg | String | | 数据列表为空时的提示图片 | 否 |
| noMore | String | ---我也是有底线的--- | 数据列表加载完毕时的提示文案 | 否 |
| hasNext | Boolean | true | 是否有下一页数据 | 是 |
// 例子
import { VirtualList } from 'lei-react-lib'
import type { ListItemProps } from "lei-react-lib";
import 'lei-react-lib/dist/assets/index.css'
const [data, setdata] = useState<ListItemProps[]>([]);
const [hasNext, sethasNext] = useState<boolean>(true);
<VirtualList
items={data}
itemHeight={50}
renderItem={(item, index) => <div>{item.name}</div>}
hasNext={hasNext}
loadMore={() => {}}
/>
Toast组件(须版本 >= 0.0.9)：
| 参数名 | 类型 | 默认值 | 说明 | 是否必传 |
|---|
| message | String | | 显示的toast内容 | 是 |
| duration | Number | 1800 | toast显示时间 | 否 |
| onClose | function | | toast关闭回调函数 | 否 |
// 例子
import { Toast } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/index.css'
Toast({
message: '这是一条toast'
})
Toast({
message: '这是一条toast',
duration: 2000,
onClose: () => {}
})
Loading组件(须版本 >= 0.0.9)：
| 参数名 | 类型 | 默认值 | 说明 | 是否必传 |
|---|
| text | String | 加载中... | loading组件显示的文字 | 否 |
| color | String | #0094ff | loading组件显示的文字颜色 | 否 |
| bgColor | String | transparent | loading组件的背景色 | 否 |
Loading组件的事件：
| 方法名 | 说明 |
|---|
| show | 显示loading组件 |
| hide | 隐藏loading组件 |
// 例子
import { Loading } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/index.css'
Loading.show()
Loading.show({
text: '加载中...',
color: '#0094ff',
bgColor: 'rgba(0,0,0,0.8)'
})
Loading.hide()
图片懒加载LazyImage组件(须版本 >= 1.0.3)：
| 参数名 | 类型 | 默认值 | 说明 | 是否必传 |
|---|
| src | String | | 图片的url | 是 |
| width | String | | 图片的宽度 | 是 |
| height | String | | 图片的高度 | 是 |
| alt | String | | 图片的alt | 否 |
| style | Object | | 图片的样式 | 否 |
| isRem | Boolean | true | 是否将px转换为rem | 否 |
| loadingImg | String | | 加载中的图片，支持颜色值、渐变色或图片URL | 否 |
| errorImg | String | | 加载失败的图片，支持颜色值、渐变色或图片URL | 否 |
| onLoad | Function | | 图片加载成功的回调函数 | 否 |
| onError | Function | | 图片加载失败的回调函数 | 否 |
| onClick | Function | | 图片点击事件 | 否 |
| borderRadius | String | | 图片的圆角 | 否 |
| className | String | | 图片的样式 | 否 |
| threshold | Number | 0.2 | 触发加载的视口比例 | 否 |
// 例子
import { LazyImage } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/style.css'
<LazyImage src="https://img.yzcdn.cn/vant/cat.jpeg" width="100px" height="100px" />
数字滚动组件NumberAnimation (须版本 >= 1.0.3)
| 参数名 | 类型 | 默认值 | 说明 | 是否必传 |
|---|
| value | Number | | 结束值 | 是 |
| duration | Number | | 滚动时间 | 否 |
| decimalPlaces | Number | 保留2位小数 | 小数位数 | 否 |
| separator | Boolean | false | 是否添加千分位 | 否 |
| className | String | | 自定义类名 | 否 |
| style | Object | | 自定义样式 | 否 |
// 例子
import { NumberAnimation } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/style.css'
<NumberAnimation value={1000} />
注意事项
请确保react版本 >= 16.8.0