react-input-owns v2.5.9
react-input-owns
react-input-owns组件,我们提供三套颜色主题 blue、purple、green,可以通过给theme属性传完整的16进制颜色和rgb值自定义主题色
包括以下几种组件
一、ReactInput 输入框组件
二、Page 分页组件
三、Slide 单选下拉组件
四、Button 按钮组件
Install
yarn add react-input-owns或者npm install react-input-owns
一、ReactInput参数详解
1、需要传递的props参数如下表:
| name | 类型 | 默认值 | 描述 |
|---|---|---|---|
| width | String、Number | 200 | 输入框长度(数字默认单位:像素),字符串示例:"200px"、"100%" |
| height | String、Number | 30 | 输入框高度(数字默认单位:像素),字符串示例:"30px"、"100%"、"2vw" |
| issearch | Boolean | false | 是否要呈现搜索框 |
| usetheme | Boolean | false | 是否要使用主题 |
| theme | String | blue | 主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准 |
| name | String | "" | 表单name值 |
| type | String | text | 表单类型,目前在样式上提供 password、text 两种可选值 |
| defaultValue | String、Number | "" | 表单默认值、受控制input需要传值 |
| refresh | Boolean | false | 当有编辑功能需要该字段 |
| borderradius | Number | 2 | 圆角(单位:像素) |
| borderwidth | Number | 1 | 边框宽度 (单位:像素) |
| bordercolor | String | #1890FF | 边框颜色,16进制、rgb值、或者其他颜色设置,不要边框可以设置此字段为 transparent |
| boxshadow | String | none | 完整的box-shadow css样式 |
| activeboxshadow | String | none | 获得焦点时完整的box-shadow css样式 |
| background | String | transparent | 输入框背景 |
| fontsize | Number、String | 14 | 字体大小(数字默认单位:像素),可以传字符串,字符串必须带单位如 "1rem" |
| fontcolor | String | #333 | 输入框里字的颜色,16进制、rgb值、或者其他颜色设置 |
| readonly | Boolean | false | 是否只读 |
| placeholder | String | 请输入内容 | 输入框的placeholder |
| maxlength | Number | 200 | 输入框可输入最大长度 |
| iconcolor | String | #1890FF | 输入框里图标的颜色,16进制、rgb值、或者其他颜色设置 |
| haseye | Boolean | false | 当type是password时有效 设置要不要眼睛 |
| eyecolor | String | #1890FF | 输入框里眼睛图标的颜色,16进制、rgb值、或者其他颜色设置 |
| pattern | Object | null | 正则 |
| allcss | String | "" | 完整的css代码 字符串 |
| incss | String | "" | 完整的css代码 给input框设置 |
| iconsize | Number、String | 14 | ×图标字体大小 |
| eyesize | Number、String | 18 | 眼睛图标字体大小 |
| searchsize | Number、String | 16 | 搜索图标字体大小 |
2、需要传递的props方法如下表:
changeContent(value,name)
1、name 是 input name值
2、value 是 输入框里的内容
focusContent(value,name) 用于取消报错
1、name 是 input name值
2、value 是 ""
二、Page参数详解
1、需要传递的props参数如下:
基本属性
| name | 类型 | 默认值 | 描述 |
|---|---|---|---|
| usetheme | Boolean | false | 是否要使用主题 |
| theme | String | blue | 主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准 |
| upDown | Boolean | true | 是否有上下页 |
| pageNumber | Boolean | true | 是否有页码list |
| allNumber | Boolean | false | 是否有共多少页 |
| jumpNumber | Boolean | false | 是否有跳到多少页 |
| selectNumber | Boolean | false | 是否有选择每页显示多少个 |
| nowpage | Number | 1 | 当前页(必传) |
| allPage | Number | 0 | 总数据条数(必传) |
| everyPage | Number | 10 | 每页显示多少个 |
样式属性
| name | 类型 | 默认值 | 描述 |
|---|---|---|---|
| allcss | String | "" | 针对于该组件外层的css完整样式代码 |
| allHeight | String、Number | 20 | 组件中数字按钮、输入框、下拉的高度(字符串需要带单位,数字默认单位px) |
| allBorderWidth | Number | 1 | 组件中数字按钮、输入框、下拉的边框宽度 (单位:像素) |
| allBorderColor | String | #1D82FE | 组件中数字按钮、输入框、下拉的边框颜色 |
| allActiveBgcolor | String | #1D82FE | 组件中数字按钮选中时的背景色 |
| allActiveFcolor | String | #fff | 组件中数字按钮选中时的字体色 |
| borderRadius | String、Number | 2 | 组件中数字按钮、输入框、下拉的圆角 (字符串需要带单位,数字默认单位px) |
| componentHeight | String、Number | 30 | 整个组件的高度(字符串需要带单位,数字默认单位px) |
| buttonFontSize | String、Number | 12 | 数字按钮的字体大小(字符串需要带单位,数字默认单位px) |
| buttonBgcolor | String | transparent | 数字按钮的背景色 |
| buttonFontColor | String | #333 | 数字按钮的字体色 |
| buttonGap | Number | 5 | 数字按钮的间隔 |
| disabledBgcolor | String | #bbb | 不可点击的上下一页按钮的背景色 |
| disabledFontColor | String | #bbb | 不可点击的上下一页按钮的字体色 |
| otherFontSize | String、Number | 12 | 除数字按钮外其他小组件字体大小(字符串需要带单位,数字默认单位px) |
| otherColor | String | #333 | 除数字按钮外其他小组件字体颜色 |
| inputWidth | String、Number | 50 | 输入框宽度(字符串需要带单位,数字默认单位px) |
| inputColor | String | #333 | 输入框字体颜色 |
| slideWidth | String、Number | 50 | 下拉框宽度(字符串需要带单位,数字默认单位px) |
| slideBgcolor | String | #fff | 下拉框背景颜色 |
| slideColor | String | #333 | 下拉框字体颜色 |
| customSlide | Array | 10,20,50,100 | 自定义下拉 |
| slideHeight | String、Number | #333 | 下拉框高 |
| slideActiveBgcolor | String | #1D82FE | 下拉框选项选中时的背景色 |
| slideActiveFcolor | String | #fff | 下拉框选项选中时的字体色 |
| slideActiveOpacity | Number | 20 | 拉框选项选中时的背景透明度 0-100 |
| slidePosition | String | up | 下拉方向 (提供 up和down两种) |
2、需要传递的props方法如下:
changeNumber(page, all) 改变当前页
1、page 是 当前页
2、all 是 总页数
changeEvery(value) 改变每页显示个数
1、value 是每页显示个数
三、Slide参数详解
1、需要传递的props参数如下:
基本属性
| name | 类型 | 默认值 | 描述 |
|---|---|---|---|
| usetheme | Boolean | false | 是否要使用主题 |
| theme | String | blue | 主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准 |
| value | String、Number | "" | 没有传空 |
| list | Array | [] | 下拉列表选项。注意这里要求必须有id和name两个字段 |
| width | String、Number | 200 | 组件宽度 |
| height | String、Number | 30 | 组件高度 |
| field | String | "" | 当有表单时该下拉的字段名称 |
| refresh | Boolean | false | 是否实时更新state |
| notEmpty | Boolean | false | 是否该字段不能为空(有没有八叉图表) |
| disturbInfo | String | "" | 打断下拉操作的信息 |
样式属性
| name | 类型 | 默认值 | 描述 |
|---|---|---|---|
| allcss | String | "" | 针对于该组件外层的css完整样式代码 |
| borderRadius | String、Number | 2 | 组件圆角 |
| borderWidth | Number | 1 | 组件中的边框宽度 (单位:像素) |
| borderColor | String | #1D82FE | 组件的边框颜色 |
| background | String | transparent | 组件主体背景 |
| fontSize | String、Number | 14 | 组件主体字体大小(字符串需要带单位,数字默认单位px) |
| fontColor | String | #333 | 组件主体字体颜色 |
| fontPlaceholderColor | String | #757575 | 组件主体类似placeholder字体颜色 |
| placeholder | String | 请选择一项 | 类似input的placeholder |
| iconColor | String | #1D82FE | × 按钮的颜色 |
| iconSize | String、Number | 14 | × 按钮的字体大小 |
| triangleColor | String | #333 | ↓下拉按钮的颜色 |
| triangleSize | String、Number | 12 | ↓下拉按钮的字体大小(字符串需要带单位,数字默认单位px) |
下拉框样式属性
| name | 类型 | 默认值 | 描述 |
|---|---|---|---|
| slideDirection | String | down | 上拉还是下拉 提供 up和down两种可选值 |
| slideOptionHeight | String、Number | 25 | 下拉每个选项的高度 |
| slideOptionNumber | Number | 7 | 下拉一屏展示多少个选项 |
| slideBackground | String | #fff | 下拉背景色 |
| slideBorderWidth | Number | 1 | 下拉框边框宽度 |
| slideBorderColor | String | #1D82FE | 下拉框边框颜色 |
| slideBoxShadow | String | none | 下拉框阴影 |
| slideFontSize | String、Number | 12 | 下拉框选项字体颜色 |
| slideActiveBgcolor | String | #1D82FE | 下拉框选项选中时的背景色 |
| slideActiveFcolor | String | #fff | 下拉框选项选中时的字体色 |
| slideActiveOpacity | Number | 20 | 拉框选项选中时的背景透明度 0-100 |
2、需要传递的props方法如下:
doSelect(value, name,field) 改变当前选项
1、value 是选中那条数据的id
2、name 是选中那条数据的name
2、field 是字段名
focus(field) 用于取消报错
1、field 是字段名
disturb(disturbinfo) 当disturbinfo不为空的时候,点击打断下拉操作并将报错信息返回
四、Button参数详解
1、需要传递的props参数如下:
基本属性
| name | 类型 | 默认值 | 描述 |
|---|---|---|---|
| usetheme | Boolean | false | 是否要使用主题 |
| theme | String | blue | 主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准 |
| name | String | 搜索 | 按钮里的字 |
| width | String、Number | 200 | 组件宽度 |
| height | String、Number | 30 | 组件高度 |
样式属性
| name | 类型 | 默认值 | 描述 |
|---|---|---|---|
| allcss | String | "" | 针对于该组件外层的css完整样式代码 |
| borderRadius | String、Number | 2 | 组件圆角 |
| borderWidth | Number | 1 | 组件中的边框宽度 (单位:像素) |
| borderColor | String | #1D82FE | 组件的边框颜色 |
| background | String | #1D82FE | 组件主体背景 |
| fontSize | String、Number | 14 | 组件主体字体大小(字符串需要带单位,数字默认单位px) |
| fontColor | String | #333 | 组件主体字体颜色 |
| cursor | String | pointer | 鼠标移到组件上的样式 |
| boxShadow | String | none | 完整的box-shadow样式 |
2、需要传递的props方法如下:
doClick() 点击事件回调
四、SlideAll参数详解
参数与slide组件基本一致 不同的时候 value 变成 select 类型是数组
引入方法与示例
import { ReactInput,Page,Slide,Button } from 'react-input-owns';
<ReactInput />
<Page
usetheme
theme="green"
allNumber
jumpNumber
selectNumber
nowpage={1}
allPage={300}
everyPage={10}
changeEvery={(num)=>changeEvery(num)}
changeNumber={(page, all) => getPages(page, all)}
/>
<Slide
usetheme
theme="green"
field="hollo"
list={[{ id: 1, name: "hollo" }, { id: 2, name: "hollo123" }]}
/>
<Button usetheme theme="green" doClick={()=>setName(2)} />4 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago