cat-react-tool
react版,日常开发插件,包括Alert、Toast、Image等
Last updated 4 months ago by songqian .
BSD · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install cat-react-tool 
SYNC missed versions from official npm registry.

react-tool 组件库

npm version npm version

工具列表

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

Current Tags

  • 0.4.0                                ...           latest (4 months ago)

29 Versions

  • 0.4.0                                ...           4 months ago
  • 0.3.9                                ...           4 months ago
  • 0.3.8                                ...           4 months ago
  • 0.3.7                                ...           4 months ago
  • 0.3.6                                ...           4 months ago
  • 0.3.5                                ...           5 months ago
  • 0.3.4                                ...           5 months ago
  • 0.3.3                                ...           5 months ago
  • 0.3.2                                ...           6 months ago
  • 0.3.1                                ...           6 months ago
  • 0.3.0                                ...           7 months ago
  • 0.2.9                                ...           7 months ago
  • 0.2.8                                ...           7 months ago
  • 0.2.7                                ...           8 months ago
  • 0.2.6                                ...           8 months ago
  • 0.2.5                                ...           8 months ago
  • 0.2.4                                ...           8 months ago
  • 0.2.3                                ...           8 months ago
  • 0.2.2                                ...           8 months ago
  • 0.2.0                                ...           8 months ago
  • 0.1.9                                ...           8 months ago
  • 0.1.8                                ...           8 months ago
  • 0.1.6                                ...           8 months ago
  • 0.1.5                                ...           8 months ago
  • 0.1.4                                ...           8 months ago
  • 0.1.3                                ...           8 months ago
  • 0.1.2                                ...           8 months ago
  • 0.1.1                                ...           8 months ago
  • 0.1.0                                ...           8 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 34
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |