cat-react-tool

react-tool 组件库

工具列表

• Button 按钮
• Toast 提示
• Alert 弹出窗口
• Loading 加载动画
• Image 图片
• Select 选择器
• Input 输入框
• Form 表单
• Tool 工具

Demo (组件不包括UI样式)

Button 按钮

<Button
    className={ 'my-btn br1' }
    onClick={ this.onClick }
    disabled={ false }
>我是一个按钮</Button>

属性	说明	类型	默认值
disabled?	是否禁止点击	boolean	无
onClick?	点击触发	() => void	无
className?	样式名	string	无
style?	style	React.CSSProperties	无
type?	html的type	string	无

---

Toast 提示

Toast({
    duration: 3000,
    text: '我是一个3秒的toast',
})

属性	说明	类型	默认值
text	提示文字	string	无
duration?	持续时间	number	3000

---

## Alert 弹出窗口

Alert({
    subtitle: '我是副标题',
    title: '我是一个alert',
})

属性	说明	类型	默认值
title	提示标题	string	无
subtitle?	提示内容	string	无
noDefault?	设置没有取消按钮	boolean	false
noPrimary?	设置没有确定按钮	boolean	false
default?	点击取消时调用	() => void	无
primary?	点击确定时调用	() => void	无

---

## Loading 加载动画

<Loading
   loading={ true }
/>

属性	说明	类型	默认值
loading	loading状态	boolean	false
text?	文字内容	string	加载中

---

## Image 图片

<Image
   className={ 'my-image' }
   src={ 'https://img7.kcimg.cn/uploads/c7/4c/c74cd79689721906d4a5831031a5c8e4.jpg' }
   alt={ '图片' }
/>

属性	说明	类型	默认值
src	显示图片地址	string	无
alt?	图片文案	string	无
className?	样式名称	string	无
defaultSrc?	默认图片地址	string	无
onSuccess?	成功加载的回调	() => void	无
onError?	错误加载的回调	(e: any) => void	无

---

Select 选择器

// 数据
let data = [{
    value: 0,
    text: '选项1',
    children: [{
        value: 0,
        text: '选项1-1',
    },{
        value: 1,
        text: '选项1-2',
    }]
},{
    value: 1,
    text: '选项2',
    children: [{
        value: 0,
        text: '选项2-1',
    },{
        value: 1,
        text: '选项2-2',
    }]
}]
<Select
    data={ data }
    onConfirm={ this.onConfirm }
    name={ 'username' }
    className={ 'my-select' }
    placeholder={ '请选择名称' }
    length={ 2 }
    error={ '请选择名称' }
/>

举例： 时间选择器、 城市选择器

// 接口
interface Value {
    text: string;
    value: string | number;
    children?: Value[] | undefined;
}

属性	说明	类型	默认值
data	选择器数据	Value[]	[]
name	select的name属性	string	无
onChange?	选择器改变后触发	(item: Value[]) => void	无
onConfirm?	确认按钮触发	(item: Value[]) => void	无
placeholder?	未选择默认文案	string	请选择
defaultValue?	默认选项	Value	无
className?	样式名称	string	无
length?	选择器数量	number	1
type?	选择器类型，可选 'date'	string	无
error?	错误提示，配合form表单使用，如果设置此项，在form中表示必填	string	无

---

## Input 输入框

<Input
   type={ 'password' }
   maxLength={ 10 }
   name={ 'password' }
   className={ 'my-input' }
   placeholder={ '请输入密码' }
   error={ '请输入密码' }
/>

属性	说明	类型	默认值
name	input的name属性	string	无
type?	input的type属性，若设置为 textarea 则为 textarea元素，mobile 自动设置长度11位验证，调用数字键盘	string	无
maxLength?	input的maxLength属性	number	无
className?	样式名	string	无
style?	style	React.CSSProperties	无
placeholder?	默认文案	string	无
onInput	oninput事件	(e) => void	无
onChange	onchange事件	(e) => void	无
error?	错误提示，配合form表单使用，如果设置此项，在form中表示必填	string	无

---

## Form 表单

<Form submit={ this.submit } toast={ Toast }>
   <Input
       type={ 'password' }
       maxLength={ 10 }
       name={ 'password' }
       className={ 'my-input' }
       placeholder={ '请输入密码' }
       error={ '请输入密码' }
   />
   <Date
       begin={ 2008 }
       end={ 2019 }
       onConfirm={ this.onConfirm }
       name={ 'time' }
       className={ 'my-select' }
       placeholder={ '请选择时间' }
       error={ '请选择时间' }
   />
   <Input
       type={ 'textarea' }
       maxLength={ 100 }
       name={ 'textarea' }
       className={ 'my-textarea' }
       placeholder={ '请输入文字' }
       error={ '请输入文字' }
   />
   <Button type={ 'submit' } className={ 'my-btn br1' }>提交</Button>
</Form>

属性	说明	类型	默认值
submit?	提交表单 返回表单内input、select、textarea等原生html元素的json对象，例：{password: 123, textarea: 666}	(json:object) => void	无
toast?	提示器	any	无
rules?	表单字段校验	object	无

---

## Tool 工具

Rem.set(750); 设置html font-size 以设计稿750为基准 1rem == 100px
Rem.get(750); 返回 以750为基准的像素值
@Mounted 装饰器，用于装饰react组件，可以防止组件卸载后调用setState 导致报错的问题
@readonly 装饰器，用于设置属性只读，不可被修改