表单组件

最近更新时间:2024-03-21 15:51:52

我的收藏

button

功能说明:按钮。
参数及说明:
属性
类型
合法值及说明
默认值
必填
说明
size
string
default:默认大小
mini:小尺寸
default
按钮的大小
type
string
primary:绿色
default:白色
warn:红色
default
按钮的样式类型
plain
boolean
-
false
按钮是否镂空,背景色透明
disabled
boolean
-
false
是否禁用
loading
boolean
-
false
名称前是否带 loading 图标
form-type
string
submit:提交表单
reset:重置表单
-
用于 form 组件,单击分别会触发 form 组件的 submit/reset 事件
hover-class
string
-
button-hover
指定按钮按下去的样式类。当 hover-class="none"; 时,没有单击态效果
hover-start-time
number
-
20
按住后多久出现单击态,单位毫秒
hover-stay-time
number
-
70
手指松开后单击态保留时间,单位毫秒

checkbox

功能说明:多选项目。
参数及说明:
属性
类型
默认值
必填
说明
value
string
-
checkbox 标识,选中时触发 checkbox-group 的 change 事件,并携带 checkbox 的 value
disabled
boolean
false
是否禁用
checked
boolean
false
当前是否选中,可用来设置默认选中
color
string
#09BB07
checkbox 的颜色,同 css 的 color

checkbox-group

功能描述:多项选择器,内部由多个 checkbox 组成。
属性说明:
属性
类型
默认值
必填
说明
bindchange
eventhandle
-
checkbox-group 中选中项发生改变时触发 change 事件,detail = {value:[选中的 checkbox 的 value 的数组]}

form

功能说明:表单,将组件内的用户输入的 switchinputcheckbox sliderradiopicker 提交。
当单击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
参数及说明
属性
类型
默认值
必填
说明
bindsubmit
eventhandle
-
携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''}
bindreset
eventhandle
-
表单重置时会触发 reset 事件

input

功能说明:输入框。该组件是 原生组件,使用时请注意相关限制。
参数及说明
属性
类型
合法值及说明
默认值
必填
说明
value
string
-
-
输入框的初始内容
type
string
text:文本输入键盘
number:数字输入键盘
idcard:身份证输入键盘
digit:带小数点的数字键盘
text
input 的类型
password
boolean
-
false
是否是密码类型
placeholder
string
-

输入框为空时占位符
placeholder-style
string
-
-
指定 placeholder 的样式
placeholder-class
string
-
input-placeholder
指定 placeholder 的样式类
disabled
boolean
-
false
是否禁用
maxlength
number
-
140
最大输入长度,设置为 -1 的时候不限制最大长度
cursor-spacing
number
-
0
指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focus
boolean
-
false
(即将废弃,请直接使用 focus )自动聚焦,拉起键盘
focus
boolean

false
获取焦点
bindinput
eventhandle
-
-
键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容
bindfocus
eventhandle
-
-
输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持
bindblur
eventhandle
-
-
输入框失去焦点时触发,event.detail = { value, encryptedValue, encryptError }
bindconfirm
eventhandle
-
-
单击完成时触发,event.detail = { value }

label

功能说明:用来改进表单组件的可用性。
使用 for 属性找到对应的 id,或者将控件放在该标签下,当单击时,就会触发对应的控件。 for 优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有:buttoncheckbox radioswitchinput
参数及说明:
属性
类型
默认值
必填
说明
for
string
-
绑定控件的 id

picker

功能描述:从底部弹起的滚动选择器。
属性说明:
属性
类型
合法值及说明
默认值
必填
说明
mode
string
selector:普通选择器
multiSelector:多列选择器
time:时间选择器
date:日期选择器
region:省市区选择器
selector
选择器类型
disabled
boolean
-
false
是否禁用
除了上述通用的属性,对于不同的 mode,picker拥有不同的属性。

普通选择器:mode = selector

属性名
类型
默认值
说明
range
array/object array
[]
mode 为 selector 或 multiSelector 时,range 有效
range-key
string
-
当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value
number
0
表示选择了 range 中的第几个(下标从0开始)
bindchange
eventhandle
-
value 改变时触发 change 事件,event.detail = {value}

多列选择器:mode = multiSelector

属性名
类型
默认值
说明
range
array/object array
[]
mode 为 selector 或 multiSelector 时,range 有效
range-key
string
-
当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value
array
[]
表示选择了 range 中的第几个(下标从0开始)
bindchange
eventhandle
-
value 改变时触发 change 事件,event.detail = {value}
bindcolumnchange
eventhandle
-
列改变时触发

时间选择器:mode = time

属性名
类型
默认值
说明
value
string
-
表示选中的时间,格式为"hh:mm"
start
string
-
表示有效时间范围的开始,字符串格式为"hh:mm"
end
string
-
表示有效时间范围的结束,字符串格式为"hh:mm"
bindchange
eventhandle
-
value 改变时触发 change 事件,event.detail = {value}

日期选择器:mode = date

属性名
类型
有效值及说明
默认值
说明
value
string
-
当天
表示选中的日期,格式为"YYYY-MM-DD"
start
string
-
-
表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"
end
string
-
-
表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"
fields
string
year:选择器粒度为年
month:选择器粒度为月份
day:选择器粒度为天
day
有效值 year,month,day,表示选择器的粒度
bindchange
eventhandle
-
-
value 改变时触发 change 事件,event.detail = {value}

省市区选择器:mode = region

属性名
类型
默认值
说明
value
Array
[]
表示选中的省市区,默认选中每一列的第一个值
custom-item
string
-
可为每一列的顶部添加一个自定义的项
bindchange
evenhandle
-
value 改变时触发 change 事件,event.detail = {value: value, code: code, postcode: postcode},其中字段 code 是统计用区划代码,postcode 是邮政编码
bindcancel
evenhandle
-
取消选择时触发
disabled
boolean
false
是否禁用

radio

功能说明:单选项目。
参数及说明
属性
类型
默认值
必填
说明
value
string
-
radio 标识。当该 radio 选中时,radio-group 的 change 事件会携带 radio 的 value
checked
boolean
false
当前是否选中
disabled
boolean
false
是否禁用
color
string
#09BB07
radio 的颜色,同 css 的 color

radio-group

功能说明:单项选择器,内部由多个 radio 组成。
参数及说明
属性
类型
默认值
必填
说明
bindchange
eventhandle
-
radio-group 中选中项发生改变时触发 change 事件,detail = {value:[选中的 radio 的 value 的数组]}

slider

功能说明:滑动选择器。
参数及说明
属性
类型
默认值
必填
说明
min
number
0
最小值
max
number
100
最大值
step
number
1
步长,取值必须大于 0,并且可被(max - min)整除
disabled
boolean
false
是否禁用
value
number
0
当前取值
color
color
#e9e9e9
背景条的颜色(请使用 backgroundColor)
selected-color
color
#1aad19
已选择的颜色(请使用 activeColor)
activeColor
color
#1aad19
已选择的颜色
backgroundColor
color
#e9e9e9
背景条的颜色
show-value
boolean
false
是否显示当前 value
bindchange
eventhandle
-
完成一次拖动后触发的事件,event.detail = {value}
block-size
number
28
滑块的大小,取值范围为 12 - 28
block-color
color
#ffffff
滑块的颜色

switch

功能说明:开关选择器。
参数及说明
属性
类型
默认值
必填
说明
checked
boolean
false
是否选中
disabled
boolean
false
是否禁用
type
string
switch
样式,有效值:switch,checkbox
color
string
#04BE02
switch 的颜色,同 css 的 color
bindchange
eventhandle
-
点击导致 checked 改变时会触发 change 事件,event.detail={ value}

textarea

功能说明:多行输入框。该组件是 原生组件,使用时请注意相关限制。
参数及说明:
属性
类型
合法值及说明
默认值
必填
说明
value
string
-
-
输入框的内容
placeholder
string
-
-
输入框为空时占位符
placeholder-style
string
-
-
指定 placeholder 的样式,目前仅支持 color,font-size 和 font-weight
placeholder-class
string
-
textarea-placeholder
指定 placeholder 的样式类
disabled
boolean
-
false
是否禁用
maxlength
number
-
140
最大输入长度,设置为 -1 的时候不限制最大长度
auto-focus
boolean
-
false
自动聚焦,拉起键盘。
focus
boolean
-
false
获取焦点
auto-height
boolean
-
false
是否自动增高,设置 auto-height 时,style.height 不生效
cursor
number
-
-1
指定 focus 时的光标位置
selection-start
number
-
-1
光标起始位置,自动聚集时有效,需与selection-end搭配使用
selection-end
number
-
-1
光标结束位置,自动聚集时有效,需与selection-start搭配使用
confirm-type
string
send:右下角按钮为“发送”
search:右下角按钮为“搜索”
next:右下角按钮为“下一个”
go:右下角按钮为“前往”
done:右下角按钮为“完成”
return:右下角按钮为“换行”
return
设置键盘右下角按钮的文字
confirm-hold
boolean
-
false
点击键盘右下角按钮时是否保持键盘不收起