Skip to content

Select 下拉选择框

select

规则

js
{
    type: 'select',
    title: '下拉选择',
    field: 'select',
    value: 'Wednesday',
    props: {
        title: '预约',
        options: [
            { text: '周一', value: 'Monday' },
            { text: '周二', value: 'Tuesday' },
            { text: '周三', value: 'Wednesday' },
            { text: '周四', value: 'Thursday' },
            { text: '周五', value: 'Friday' },
        ],
        placeholder: '请选择',
    }
}

参考:Vant_Picker

value :Number | String

Options

字段名说明字段类型是否必填默认值
value参数值String,Numbertrue-
text字段别名Stringtrue-
disabled设置为禁用状态Booleanfalsefalse

Props

参数说明类型默认值
disabled是否禁用输入booleanfalse
options对象数组,配置每一列显示的数据PickerOption[] | PickerOption[][][]
columns-field-names自定义 options 结构中的字段object{ text: 'text', value: 'value', children: 'children' }
title顶部栏标题string-
confirm-button-text确认按钮文字,设置为空字符串可以隐藏按钮string确认
cancel-button-text取消按钮文字,设置为空字符串可以隐藏按钮string取消
toolbar-position顶部栏位置,可选值为 bottomstringtop
loading是否显示加载状态booleanfalse
readonly是否为只读状态,只读状态下无法切换选项booleanfalse
show-toolbar是否显示顶部栏booleantrue
allow-html是否允许选项内容中渲染 HTMLbooleanfalse
option-height选项高度,支持 px vw vh rem 单位,默认 pxnumber | string44
visible-option-num可见的选项个数number | string6
swipe-duration快速滑动时惯性滚动的时长,单位 msnumber | string1000

Events

事件名说明回调参数
confirm点击完成按钮时触发{ selectedValues, selectedOptions, selectedIndexes }
cancel点击取消按钮时触发{ selectedValues, selectedOptions, selectedIndexes }
change选中的选项改变时触发{ selectedValues, selectedOptions, selectedIndexes, columnIndex }
click-option点击选项时触发{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex }
scrollInto当用户通过点击或拖拽让一个选项滚动到中间的选择区域时触发{ currentOption, columnIndex }

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用