下拉单选

介绍

当用户需要从一组数据中选择一个，可以使用下拉单选组件，点击后选择对应项。

API

Props

参数名	描述	类型	默认值
status	状态	'default' |'disabled'|'hide'|'readonly'	'default'
showLabel	显示标题	boolean	-
title	标题	string	-
value	默认值	string	-
placeholder	占位提示	string	'请选择'
allowClear	允许清除, 右侧图标配置后, 允许清除配置项无效	boolean	true
clickable	点击反馈	boolean	true
leftIcon	左侧图标	string	-
rightIcon	右侧图标, 右侧图标配置后, 允许清除配置项无效	string	-
showToolbar	是否显示顶部栏	boolean	true
toolbarPosition	顶部栏位置	'top'|'bottom'	'top'
pickerTitle	顶部栏标题	string	-
confirmButtonText	确认按钮文字	string	-
cancelButtonText	取消按钮文字	string	-
visibleOptionNum	可见的选项个数	number	6
selectType	选项类型	'default'|'multiple'|'cascade'	'default'
options	自定义配置	Options[]	-
fieldNames	指定字段名	{ key: string, title: : string, }	{ key: 'key', title: : 'title', }
baseStyle	自定义样式	string	-
customClass	类名绑定， 绑定类的名称	string	-
border	内边框	boolean	false
colon	标题后添加冒号	boolean	false
labelWidth	标题宽度	{value:string,unit:'px'|'vh'|'em'|'%'}	{value: "6.2",unit: "em"}
labelAlign	标题对齐方式	'top'|'left'|'center'|'right'	'left'
inputAlign	内容对齐方式	'top'|'left'|'center'|'right'	'left'
center	内容垂直居中	boolean	false
uniqueKey	唯一标识 ， 组件的唯一标识	string	-
name	表单字段	string	-
tip	气泡提醒	string	-
isLink	展示右侧箭头并开启点击反馈	boolean	false
arrowDirection	箭头方向	'up'|'down'|'left'|'right'	'right'
extraSlot	右侧额外插槽	boolean	false
validate	校验	Validate	-
loop	循环 ， 循环渲染设置	Loop	-

Props-自定义配置

参数名	描述	类型	默认值
key	选项值	string	-
value	标题	string	-
disabled	禁用	boolean	false

Events

事件名	描述	参数
onChange	选择值变化时	ctx params:{value:string} loop:LoopParams
onClickOption	点击选项时触发	ctx params:ClickOptionParams loop:LoopParams
onConfirm	点击完成按钮时触发	ctx params:ConfirmParams loop:LoopParams
onCancel	点击取消按钮时触发	ctx loop:LoopParams
onClear	点击清除按钮	ctx params:{value:string} loop:LoopParams
onClickLeftIcon	点击左侧图标时	ctx params:{value:string} loop:LoopParams
onClickRightIcon	点击右侧图标时	ctx params:{value:string} loop:LoopParams

Type

// 选项配置
type Options = {
  "key":string,
  "value":string,
  "disabled":boolean
}
// 点击选项时触发参数
type ClickOptionParams = {
  "columnIndex":number,
  "currentOption":Options,
  "selectedIndexs":number[],
  "selectedOptions":Options[],
  "selectedValues":string[]
}
//点击完成按钮时触发参数
type ConfirmParams = {
 selectedIndexs:number[],
 selectedOptions:Options[],
 selectedValues:string[]
}