dropdown

下拉框

因为原生 select实在是难用,avalon的dropdown组件在兼容原生 select的基础上,对其进行了增强。

使用说明

名字 类型 默认值 说明
配置参数
container Object null 放置列表的容器
width Number 200 自定义宽度
listWidth Number 200 自定义下拉列表的宽度
titleWidth Number 0 title部分宽度
height Number 200 下拉列表的高度
enable Boolean true 组件是否可用
readOnly Boolean false 组件是否只读
hoverAutoShow Boolean false 是否开启鼠标移入打开下拉列表鼠标移出关闭下拉列表功能
readonlyAttr Object null readonly依赖的属性
currentOption Object null 组件当前的选项
data Array [] 下拉列表显示的数据模型
source Object null 下拉列表的数据源
textFiled String "text" 模型数据项中对应显示text的字段,可以传function,根据数据源对text值进行格式化
valueField String "value" 模型数据项中对应value的字段
value Array [] 设置组件的初始值
label String "" 设置组件的提示文案,可以是一个字符串,也可以是一个对象
multiple Boolean false 是否为多选模式
listClass String "" 列表添加自定义className来控制样式
titleClass String "" title添加自定义className来控制样式
position Boolean true 是否自动定位下拉列表
onSelect Object null 点击选项时的回调
onShow Object null 下拉框展示的回调函数
onHide Object null 下拉框隐藏的回调函数
onChange Object null value改变时的回调函数
keyboardEvent Boolean true 是否支持键盘事件
getTemplate(str,options) Function 模板函数,方便用户自定义模板
参数名/返回值 类型 说明
str String 默认模板
opts Object VM
返回 String 新模板
onInit Member avalon.noop 初始化时执行方法
接口方法与固有属性
$remove() Function 当组件移出DOM树时,系统自动调用的销毁函数
val(newValue) Function
参数名/返回值 类型 说明
newValue newValue 设置控件的值,需要注意的是dropdown设置了multiple属性之后,值是数组,未设置multiple属性的时候,可以接受字符串,数字,布尔值;未设置该值时,效果是返回当前控件的值
返回 vmodel.value 控件当前的值