全球领先的SaaS智能营销云平台

< 文档首页

API文档

首页 > API文档 > UI组件

表单

更新时间： 2024-11-21 17:50:43

表单

Address

Address 基于 PopupPicker & Cell扩展。

Demo

Props

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

Calendar

Calendar 基于 InlineCalendar & Popup扩展。

Demo

Props

参数	说明	类型	默认值
title	cell标题	String	无

Inline-Calendar

Demo

Props

参数	说明	类型	默认值
hideWeek-list	是否隐藏星期列表	Boolean	false
replace-text-list	替换列表，可以将任意默认的日期换成对应的自定义文字，比如今天的日期替换成今，{ 'TODAY': '今' }	Object	{ }
start-date	可选起始日期，格式为'YYYY-MM-dd'	String	无
show-last-month	是否显示上个月的日期	Boolean	true
show-next-month	是否显示下个月的日期	Boolean	true
highlight-weekend	是否高亮周末	Boolean	false
return-six-rows	是否总是渲染6行日期	Boolean	true
hide-header	是否隐藏日历头部	Boolean	false
render-month	可选，只渲染指定月份的日历，如[2016, 10]，即只渲染2016年10月份的日历，其他月份不渲染	Array	无
end-date	可选结束日期，格式为'YYYY-MM-dd'，即为日历指定范围	String	无
custom-slot-fn	可选，用于为特定日期添加额外的html内容，参数为(行index,列index,日期详细属性)	Function	无
render-on-value-change	当日期变化时是否重新渲染日历，如果是渲染了多个日历的话需要设为false	Boolean	true
disable-past	是否禁止选择过去的日期，该选项可以与start-date同时使用	Boolean	false
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会自动设置为true	Boolean	false
primary	可选，可选值为title和content，对应的div会加上为weui_cell_primary类名实现内容宽度自适应	String	title

Slots

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

Checker

Checker 与 CheckerItem 组件配合使用

Demo

Props

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

Slots

名字	说明
默认slot	check-item区域

Checklist

Demo

Props

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

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

Datetime

需要与 Group 组件一起使用

Demo

Props

参数	说明	类型	默认值
inline-desc	副标题	String	无
value	日期值	String	默认为当前日期
hour-row	小时显示格式	String	{value}
cancel-text	取消按钮文本	String	cancel
confirm-text	确认按钮文本	String	ok
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	是否增加自定义输入框	Boolean	false
fill-label	自定义输入框标签	String	无
options	选项列表, 支持简单数组及key=>value键值对，使用键值对时表单值为key	Array	无
value	表单值，必选，双向绑定	String	无

Events

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

Range

Demo

Props

参数	说明	类型	默认值
step	可选，滑动步长	Number	0
decimal	可选，是否开启小数支持	Boolean	false
disabled	可选，是否为禁止状态	Boolean	false
disabled-opacity	可选，禁止状态下控件的透明度	Number	0.75
min	可选，取值范围最小值	Number	0
max	可选，取值范围最大值	Number	100
min-HTML	可选，最小值定制内容	String	无
max-HTML	可选，最大值定制内容	String	无
range-bar-height	可选，状态条的高度	Number	1
range-handle-height	可选，滑柄位置	Number	30
value	可选，当前选择值	Number	0

Rater

Demo

Props

参数	说明	类型	默认值
disabled	可选，不可点击	Boolean	false
active-color	可选，激活时颜色	String	#FFAC38
font-size	可选，图标大小	Number	25
margin	可选，图标间距离	Number	2
max	可选，最高评分值	Number	5
star	可选，评分图标样式	String	★
value	可选，评分值，双向绑定	Number	0

Selector

需要配合 Group 组件一起使用

Demo

Props

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

Events

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

Switch

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

Demo

Props

参数	说明	类型	默认值
disabled	是否禁止操作	Boolean	false
inline-desc	副标题	String	无
title	cell标题, 支持传入HTML	String	无
value	表单值,双向绑定	Boolean	false

Events

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

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	可选，是否为必填表单元素	Boolean	true
max	最大字符数	Number	无
min	最小字符数	Number	无
is-type	内置验证类型，支持email, china-mobile, china-name	String	无
inline-desc	标题下文字	String	无
keyboard	只支持 `number` type, 用于激活数字键盘	String	false
readonly	只读，不可修改	Boolean	无
placeholder	输入提示	String	无
equal-with	当前input需要与某input输入完全一致，用于确认填写	String	无
show-clear	是否显示清除按钮	Boolean	true
text-align	input的对齐样式	String	left
title	标题	String	无
type	设置组件内input的type	String	text
value	表单值，双向绑定	String	无

Events

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

X-Number

XNumber 需要与 Group 配合使用

Demo

Props

参数	说明	类型	默认值
fillable	可选，是否可以输入	Boolean	true
max	可选，数字范围最大值	Number	无
min	可选，数字范围最小值	Number	无
step	可选，步长	Number	1
title	可选，标题	String	无
value	当前输入框值	Number	0
width	可选，输入框宽度	Number	50