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 装饰器，用于设置属性只读，不可被修改