jt-app

jetone react mobile component kao

目录

0.目录

[toc]

布局说明（参数可不填，不填都为默认值）

1.Cells

参数	说明
无	无

回到目录

2. Cell

参数	说明
layoutType	布局默认inline（横布局）,block(垂直布局)
clickFunc	点击事件（默认无点击事件）
switch	开关模式，只需在标签switch（默认无）
fontSize	默认字体为14字号，fontSize:big为16字号，small为14字号

用法 ：

回到目录

3.Hd

参数	说明
layoutType	布局默认inline（横布局）,block(垂直布局)

用法：

<Hd layoutType="block"></Hd>

回到目录

4.Bd

参数	说明
big	直接在Bd标签写big，表示所用字号为16px，默认14px
colorType	默认颜色为#333333，当colorType为text时，颜色为#666666，否则为#333333

回到目录

5.Ft

参数	说明
layoutType	布局默认inline（横布局）,block(垂直布局)
link	默认为false，true表示有">"的跳转符（link跟changeDirect不能同时为true或是同时为false，如同时为true，link的优先级较高）
changeDirect	默认为false，true表示有“∨”的下拉符（link跟changeDirect不能同时为true或是同时为false，如同时为true，link的优先级较高）

用法:

回到目录

6.Icon

参数	说明
无	无

回到目录

7.Label（默认无参数）

参数	说明
checkBox	需用到checkbox就填写checkbox
radio	需用到radio就填写radio

用法：

<Label checkBox></Label>
<Label radio></Label>
<Label></Label>

回到目录

8.SelectContainer

参数	说明
before	需将select容器反正最左变就在容器加before（仅需写before）
after	默认值

用法：

<SelectContainer before></SelectContainer>
<SelectContainer></SelectContainer>（默认after）

回到目录

各个控件的参数说明(modelType都有默认值)

1.InputCell（默认为：标题+input）

modelType包括iconInput和默认的标题+input（titleInput）

参数	说明
data	数据源（object）
dataModel	参数（object）
typingChange	input的change事件
clear	清除input的内容事件

dataModel的属性表：

modelType	input的组合类别
layoutType	布局类型，默认水平布局（垂直block/水平）
modelKey	对应data（数据源）的属性名
modelName	需要显示给别人看的说明文字，如：姓名
inputType	input的type类型
icon	图片url
disabled	默认可读可写（参数值为false或是“rw”），只读：true或是“r”

使用例子

<InputCell 
data={data} 
dataModel={{ modelType:"iconInput", modelName: "姓名", inputType: "text", modelKey: "name",icon:closeIcon,disabled: "r"}} 
typingChange = {typingChange } 
clear={clear}/>

回到目录

2.TextAreaCell（默认布局为横布局，形式都为：标题+textArea）

参数列	说明
data	数据源（object）
dataModel（object）	参数object
typingChange	textarea的change事件

dataModel的属性表：

layoutType	布局类型，默认水平布局（垂直block/水平）
modelName	需要显示给别人看的说明文字，如：姓名
modelKey	对应data（数据源）的属性名

使用例子

<TextAreaCell
data={data} 
dataModel={{ layoutType:"block", modelName: "姓名",modelKey: "name"}} 
typingChange = {typingChange } 
/>

回到目录

3.textCell(默认为：标题+值)

modelType包括text、preTextIcon、textAfterIcon、preTitleTextIcon、titleTextAfterIcon、textLink、preTextIconLink、titleTextLink、 textCollapse、iconTextCollapse、titleTextCollapse、mergeText、mapText、list和默认值（textTitle）

参数列	参数属性名
data	数据源（object）
dataModel	参数object

dataModel的属性表：

modelType	textCell的组合类型
modelName	显示的自定义的名字,如姓名
modelKey	对应data（数据源）的属性名
icon	图标(图片的链接)
link	默认为false,true表示有">",false为没有
clickFunc	列表的点击事件
collapseFunc	点击列表下拉的事件
isOpened	true为点击列表下拉内容,false为收起下拉内容
collapseList	点击列表下拉的显示的内容
modelKeyOne	左边对应的data值得属性名
modelKeyTwo	右边对应的data的属性名
modelLoopKey	循环获取字段的的data的属性名
modelKeyArray	子数据（数组）
listLayoutType	子数据（数组）的布局类型
listModelName	子数据（数组）的自定义名称
listModelKey	对应子数据（数据源）的属性名
listLayoutType	子数据（数组）的布局类型
listInputType	子数据（数组）的input的type
listInputDisabled	子数据的input是否可读可写，默认可读可写（true或是rw”），只读为false或是“r”

使用例子

A:{ modelType: "preTextIconLink",
 modelName: "姓名",
 modelKey: "name", 
icon: closeIcon, 
clickFunc: (e, data) => myFunction(e, data), link: true },
B: { modelType: "titleTextCollapse", 
modelKeyOne: "name",
 modelKeyTwo: "age", 
collapseFunc: collapseFunc,
 link: true, isOpened: true,
 collapseList: collapseList,
 icon: closeIcon }

4.switchCell(默认为单个的switch(值+switch))

参数	说明
data	数据源（object）
dataModel	参数object

dataModel的属性表：

modelType	switchCell的组合类型
switchData	需循环switch列表的数据
modelSwitchListKey	需循环switch列表的数据的属性名
switchListCheck	需循环switch列表开关(true为开,false为关)
switchListChange	需循环switch列表的switch的事件
switchListParamOne	需循环switch列表的switch的事件的参数1
switchListParamTwo	需循环switch列表的switch的事件的参数2
mainSwitchCheck	需循环switch列表的总开关(true,false)
mainSwitchChange	需循环switch列表的总开关的事件
switch	只填switch
switchCheck	单个switch的开关(true,false)
typingChange	单个switch的事件
paramOne	单个switch的事件的参数1
paramTwo	单个switch的事件的参数2

使用例子

单个switch
{ componentType: "switchGroup",
 modelKey: "name", 
switchCheck: true,
 paramOne: "name",
 paramTwo: "age", 
typingChange: (name, age) => switchChange(name, age) 
},
     多个switch          
 {
    componentType: "switchGroup",
    modelType: "switchList",
    modelSwitchListKey: "name",
    switchListCheck: "checked",
    switchListChange: (name, age) => switchListChange(name, age),
    switchListParamOne: "id", switchListParamTwo: "age",
    mainSwitchCheck: true,
    mainSwitchChange: mainSwitchChange
 },

回到目录

5.selectCell 默认为:标题+select

modelType包括select、selectText、iconTitleText、titleSelectText和默认值（标题+select（textSelect））

参数	说明
data	data数据源（object）
dataModel	参数object
typingChange	select的onchange事件

dataModel的属性表:

layoutType	布局类型，默认水平布局（垂直block/水平）
modelType	selectCell 的组合类型
modelKey	select所需的data属性名
modelName	自定的名字
disabled	select是否可选,默认可选（参数值为false或是“rw”），不可选的参数值为：true或是“r”
selectInputDisabled	select后面的input是否可以读写，默认是可读可写,默认可选（参数值为false或是“rw”），不可选的参数值为：true或是“r”
inputType	input的类型（如type=text，只填天text）
modelInputKey	input所需data的字段名（或是自定的字段名）
modelInputName	自定input的名称
icon	icon链接
dataSource	select的数据源

回到目录

6.imageCell 无默认值

modelType包括image和uploadImg

参数列	参数属性名
data	data数据源（object）
dataModel	参数object

dataModel的属性表：

layoutType	布局类型，默认水平布局（垂直block/水平）
modelType	imageCell的组合类型
modelKey	所需data的属性值
modelName	自定义名字
baseUrl	img的外网地址
uploadImgFunc	打开拍照功能的点击事件
viewImg	拍照时查看图片
reviewImg	查看图片
delImg	删除图片

回到目录

7.checkBoxCell 默认为(checkboxText)

参数列	参数属性名
data	data数据源（object）
dataModel	参数object

dataModel的属性表：

modelType	checkBoxCell的类型
modelName	自定义名字
modelKey	所需data的属性名
checked	是否选中（true、false）
checkFunc	选中的点击事件

回到目录

8.cardList

modelType暂时只有默认值

参数列	参数属性名
data	data数据源（object）
dataModel	参数object

dataModel属性表：

modelType	cardList的组合类型
cardData	卡片的数据源（Array数组）
modelCardName	卡片自定名字
modelCardKey	卡片数据的属性
modelCardStatus	卡片数据的属性（变成一个圆形显示）
modelCardId	传入卡片操作事件的卡片数据id
firstBtnName	卡片按钮的名字1
secondBtnName	卡片按钮的名字2
firstClickFunc	卡片按钮1的点击事件
secondClickFunc	卡片按钮1的点击事件

回到目录

9.formView 默认为input的组合

componentType包括inputGroup（InputCell）、textAreaGroup（TextareaCell）、imageGroup（ImageCell）、selectGroup（SelectCell）、 checkBoxGroup（CheckBoxCell）、switchGroup（SwitchCell）、cardGroup（CardList）和默认组合（textCell）

参数	参数属性名
data	data数据源（object）
dataModel	参数Array
typingChange	InputCell、TextareaCell的触发事件
clear	InputCell的清除输入的的触发事件
buttons	传入btn的数组
btnPosition	btn的放的位置，默认在放在内容结束后，如要固定在屏幕最底部，需设置btnPosition=’bottom‘

dataModel的参数表

componentType	formView 使用的cell类型
其余参数	其余参数根据componentType的类型找到对应的Cell填写对应的参数值

buttons的参数表

btnText	自定义按钮名称
disabled	按钮是否可点击
btnFunc	点击按钮触发的事件

 buttons={
     [
        {
            btnText: "登录", disabled: true, btnFunc: login
        }
    ]
}

回到目录

10.toast

方法	key	type	duration	文本
showToast	自定义key名称（必填）	fail、success两种type（必填）	设置多少秒后消失弹框（1代表1秒），null为弹框不自动消失（必填）	设置文本内容，如：操作成功（文字数量不限）
showLoading	自定义key名称（必填）	无此参数	无此参数	设置文本内容，如：正在加载（文字4个+’···‘）
hideToast	传入以上自定义的key名称（必填）	无此参数	无此参数	无此参数

回到目录