首页 > API文档 > UI组件
表单
更新时间: 2021-12-08 11:10:12

表单

Address

Address 基于 PopupPicker & Cell扩展。

Demo



Props

参数说明类型默认值
hide-district是否隐藏行政区Boolean
inline-desccell的子标题String
list地址库, 可通过异步接口取回, 或者静态化为list.json文件放到本地Array
placeholder水印,可作为占位符String
raw-value是否传入中文字面值Booleanfalse
title标题String
value表单,address field的值,双向绑定Array[]

Calendar

Calendar 基于 InlineCalendar & Popup扩展。

Demo



Props

参数说明类型默认值
titlecell标题String

Inline-Calendar

Demo





Props

参数说明类型默认值
hideWeek-list是否隐藏星期列表Booleanfalse
replace-text-list替换列表,可以将任意默认的日期换成对应的自定义文字,比如今天的日期替换成今,{ 'TODAY': '今' }Object{ }
start-date可选起始日期,格式为'YYYY-MM-dd'String
show-last-month是否显示上个月的日期Booleantrue
show-next-month是否显示下个月的日期Booleantrue
highlight-weekend是否高亮周末Booleanfalse
return-six-rows是否总是渲染6行日期Booleantrue
hide-header是否隐藏日历头部Booleanfalse
render-month可选,只渲染指定月份的日历,如[2016, 10],即只渲染2016年10月份的日历,其他月份不渲染Array
end-date可选结束日期,格式为'YYYY-MM-dd',即为日历指定范围String
custom-slot-fn可选,用于为特定日期添加额外的html内容,参数为(行index,列index,日期详细属性)Function
render-on-value-change当日期变化时是否重新渲染日历,如果是渲染了多个日历的话需要设为falseBooleantrue
disable-past是否禁止选择过去的日期,该选项可以与start-date同时使用Booleanfalse
value当前选中日期,双向绑定,默认为空,即选中当天日期String
weeks-list导航星期列表,从周日开始Array['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

Cell

需要与 Group 组件一起使用

Demo



Props

参数说明类型默认值
title可选,lable文字String
value可选,右边文字String
inline-desc可选,lable第二行文字String
link可选,支持http绝对路径及v-link配置String or Object
is-link可选,是否为链接,如果为true,样式上会出箭头。当link存在时,is-link会自动设置为trueBooleanfalse
primary可选,可选值为title和content,对应的div会加上为weui_cell_primary类名实现内容宽度自适应Stringtitle

Slots

名字说明
默认slotvalue区域
icontitle前,用于定义icon区域
after-titleafter-title
valuevalue区域,同默认slot,保留仅出于兼容考虑,不建议再使用

Checker

CheckerCheckerItem 组件配合使用

Demo





Props

参数说明类型默认值
default-item-class初始状态时,check-item的默认样式String
disabled-item-classdisabled状态时,check-item的样式String
selected-item-class选中时,check-item的样式String
valuecheck-item的值,双向绑定String or Number

Slots

名字说明
默认slotcheck-item区域

Checklist

Demo



Props

参数说明类型默认值
max可选,至多选择条目个数Number
min可选,至少选择条目个数Number
options选项数组Array
random-order可选,是否打乱条目排序Booleanfalse
required可选,是否为必选项Booleantrue
title选项标题String
value可选,已选择条目值Array

当设置 required=false 时,min 设置将无效,即最少选定个数为 0

Datetime

需要与 Group 组件一起使用

Demo



Props

参数说明类型默认值
inline-desc副标题String
value日期值String默认为当前日期
hour-row小时显示格式String{value}
cancel-text取消按钮文本Stringcancel
confirm-text确认按钮文本Stringok
format显示格式String'YYYY-MM-DD'
day-row日期显示格式String{value}
placeholder提示文字String
min-year最小可选年Number
max-year最大可选年Number
month-row月份显示格式String{value}
minute-row分钟显示格式String{value}
title显示标题String
year-row年份显示格式String{value}

Radio

需要与 Group 组件一起使用

Demo



Props

参数说明类型默认值
fill-placeholder自定义输入框的水印提示String
fill-mode是否增加自定义输入框Booleanfalse
fill-label自定义输入框标签String
options选项列表, 支持简单数组及key=>value键值对,使用键值对时表单值为keyArray
value表单值,必选,双向绑定String

Events

自定义事件名参数描述
on-changevalue值变化时触发

Range

Demo



Props

参数说明类型默认值
step可选,滑动步长Number0
decimal可选,是否开启小数支持Booleanfalse
disabled可选,是否为禁止状态Booleanfalse
disabled-opacity可选,禁止状态下控件的透明度Number0.75
min可选,取值范围最小值Number0
max可选,取值范围最大值Number100
min-HTML可选,最小值定制内容String
max-HTML可选,最大值定制内容String
range-bar-height可选,状态条的高度Number1
range-handle-height可选,滑柄位置Number30
value可选,当前选择值Number0

Rater

Demo



Props

参数说明类型默认值
disabled可选,不可点击Booleanfalse
active-color可选,激活时颜色String#FFAC38
font-size可选,图标大小Number25
margin可选,图标间距离Number2
max可选,最高评分值Number5
star可选,评分图标样式String
value可选,评分值,双向绑定Number0

Selector

需要配合 Group 组件一起使用

Demo



Props

参数说明类型默认值
options选项列表, 支持简单数组及key=>value键值对,使用键值对时表单值为keyArray
placeholder指示文本String
readonly只读Booleanfalse
title标题String
value表单值,双向绑定String

Events

自定义事件名参数描述
on-changevalue值变化时触发

Switch

作为行内表单组件, Switch 组件需要与 Group 组件一起使用

Demo



Props

参数说明类型默认值
disabled是否禁止操作Booleanfalse
inline-desc副标题String
titlecell标题, 支持传入HTMLString
value表单值,双向绑定Booleanfalse

Events

自定义事件名参数描述
on-changevalue值变化时触发

X-Button

Demo



Props

按钮文字可以用text属性也可以用直接用默认slot

参数说明类型默认值
disabled可选,lable文字Boolean
mini可选,lable文字Boolean
plain可选,lable文字Boolean
text可选,lable文字String
type可选,lable文字Any

Slots

名字说明
默认slot按钮文字

X-Input

命名为 x-input 避免与原生 input 标签渲染冲突

注意不要混淆:x-input 不是原生 input,不能使用 v-model,数据绑定语法为: value.sync, 也不支持大多数 input 上的事件如focus等,如果确实需要处理input事件,可以直接html标签。

XInput 需要与 Group 配合使用

Demo



Props

参数说明类型默认值
required可选,是否为必填表单元素Booleantrue
max最大字符数Number
min最小字符数Number
is-type内置验证类型,支持email, china-mobile, china-nameString
inline-desc标题下文字String
keyboard只支持 number type, 用于激活数字键盘Stringfalse
readonly只读,不可修改Boolean
placeholder输入提示String
equal-with当前input需要与某input输入完全一致,用于确认填写String
show-clear是否显示清除按钮Booleantrue
text-aligninput的对齐样式Stringleft
title标题String
type设置组件内input的typeStringtext
value表单值,双向绑定String

Events

自定义事件名参数描述
on-changevalue值变化时触发

X-Number

XNumber 需要与 Group 配合使用

Demo



Props

参数说明类型默认值
fillable可选,是否可以输入Booleantrue
max可选,数字范围最大值Number
min可选,数字范围最小值Number
step可选,步长Number1
title可选,标题String
value当前输入框值Number0
width可选,输入框宽度Number50

Events

自定义事件名参数描述
on-changevalue值变化时触发