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
$3
#### 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 是 ""
$3
#### 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 是每页显示个数
$3
#### 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不为空的时候,点击打断下拉操作并将报错信息返回
$3
#### 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() 点击事件回调
$3
参数与slide组件基本一致 不同的时候 value 变成 select 类型是数组
引入方法与示例
``
js
import { ReactInput,Page,Slide,Button } from 'react-input-owns';
usetheme
theme="green"
allNumber
jumpNumber
selectNumber
nowpage={1}
allPage={300}
everyPage={10}
changeEvery={(num)=>changeEvery(num)}
changeNumber={(page, all) => getPages(page, all)}
/>
usetheme
theme="green"
field="hollo"
list={[{ id: 1, name: "hollo" }, { id: 2, name: "hollo123" }]}
/>
``