这是一个react组件库，里面包含Toast组件、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()

注意事项

请确保react版本 >= 16.8.0