参数 | 说明 | 类型 | 默认值 |
size | 选择器尺寸 可选值: 'small', 'medium', 'large' |
Enum | 'medium' |
value | 当前值,用于受控模式 | any | - |
defaultValue | 初始的默认值 | any | - |
placeholder | 没有值的时候的占位符 | String | - |
state | 校验状态 可选值: 'error', 'loading' |
Enum | - |
autoWidth | 下拉菜单是否与选择器对齐,如果需要下拉区域自动撑开,需要配置为false | Boolean | true |
readOnly | 是否只读,只读模式下可以展开弹层但不能选 | Boolean | - |
followTrigger | 是否跟随滚动 | Boolean | false |
disabled | 是否禁用选择器 | Boolean | - |
dataSource | 传入的数据源, const dataSource = [ {label:'option1', value:'option1'}, {label:'option2', value:'option2'}, {label:'disabled', disabled:true} ]; |
Array<Object/Boolean/Number/String> | - |
mode | 选择器模式 可选值: 'single', 'multiple', 'tag' |
Enum | 'single' |
onChange | Select发生改变时触发的回调 参数: event event.detail.value:选中的值 |
Function | - |
参数 | 说明 | 类型 | 默认值 |
label | 设置分组的文案 | ReactNode | - |
参数 | 说明 | 类型 | 默认值 |
value | 选项值 | any | - |
disabled | 是否禁用 | Boolean | - |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <view> <view class = "com-title" >基础选择器</view> <select onChange= "onChange" onBlur= "onBlur" onToggleHighlightItem= "onToggleHighlightItem" defaultValue= "jack" showSearch hasClear> <option value= "jack" >Jack</option> <option value= "frank" >Frank</option> <option value= "hugo" >Hugo</option> </select> <view class = "com-title" >标签</view> <select aria-label= "tag mode" mode= "tag" onChange= "handleChange" dataSource= "{{dataSource}}" style= "width: 300" /> <view class = "com-title" >多选</view> <select class = "custom-select-1" mode= "multiple" onChange= "handleChange" dataSource= "{{dataSource}}" style= "width: 200" /> <select class = "custom-select-1" hasSelectAll mode= "multiple" onChange= "handleChange" dataSource= "{{dataSource}}" style= "width: 200" /> <select class = "custom-select-1" hasSelectAll value= "{{value}}" mode= "multiple" onChange= "handleChange1" dataSource= "{{dataSource}}" style= "width: 200" /> <view class = "com-title" >级联选择</view> <view class = "demo-container" > <select class = "custom-select-1" placeholder= "Select Province" dataSource= "{{provinceData}}" value= "{{province}}" onChange= "handleProvinceChange" /> <select class = "custom-select-1" placeholder= "Select City" dataSource= "{{data}}" value= "{{city}}" onChange= "handleCityChange" disabled= "{{disabled}}" /> </view> <view class = "com-title" >分组</view> <view class = "demo-container" > <select class = "custom-select-1" placeholder= "OptionGroup" > <option-group label= "group1" > <option value= "small" >Small</option> <option value= "medium" >Medium</option> <option value= "large" >Large</option> </option-group> <option-group label= "group2" > <option value= "small2" >Small2</option> <option value= "medium2" >Medium2</option> <option value= "large2" >Large2</option> </option-group> </select> <select class = "custom-select-1" placeholder= "optgroup" > <option value= "apple" >Apple</option> <option value= "orange" >Orange</option> <option value= "banana" >Banana</option> <option-group label= "Pets Group" > <option value= "cat" >Cat</option> <option value= "rabbit" >Rabbit</option> <option value= "dog" disabled>Dog</option> </option-group> </select> <select class = "custom-select-1" placeholder= "item.children" dataSource= "{{dataSource1}}" /> </view> </view> |