Skip to content

Select ​

组合式选择器运行时:Root 持有 value/open,Trigger/Value/Content/Item 分工渲染。

运行时 ​

状态契约由 @varo-ui/headless 提供;渲染 Parts 分别来自 @varo-ui/h5/primitives 与 @varo-ui/weapp/primitives。

演示 ​

安装包@varo-ui/headless

基础用法 ​

通过上方演示面板切换 H5 与 Weapp primitive 预览/代码;每个运行时只渲染当前条目。

分组、只读与禁用 ​

分组用 SelectGroup/SelectLabel。readonly 状态下组件仍可打开、关闭和浏览选项,但 SelectItem 和 setValue 不会更改 value;disabled 连打开操作也会阻止。定位与动画交给 UI wrapper。

Parts ​

Part作用
SelectRootvalue/open 状态
SelectTrigger打开入口
SelectValue当前值展示
SelectContent选项容器
SelectGroup分组
SelectLabel分组标题
SelectItem单个选项

Props ​

SelectRoot ​

Prop类型默认值描述
valueunknownundefined受控值
defaultValueunknownundefined非受控初始值
openboolean | undefinedundefined受控打开态
defaultOpenbooleanfalse非受控初始打开态
optionsarrayundefined选项数据
placeholderstringundefined占位
disabledbooleanfalse禁用
readonlybooleanfalse只读
multiplebooleanfalse多选语义

SelectItem ​

Prop类型描述
optionobject选项对象

Events ​

EventPayload描述
update:valueunknown值同步
valueChangeunknown值变化
update:openboolean打开态同步
openChangeboolean打开态变化

无障碍 ​

  • Trigger 在普通与 readonly 状态下负责打开;disabled 时不能打开。
  • Item 负责选择;readonly/disabled 时不应改 value。
  • aria-readonly 由拥有选择语义的 role owner 暴露,不把 readonly 报告为 disabled。

平台差异

  • H5 可实时预览打开/选择。
  • 小程序侧浮层定位与 portal 策略由封装层处理。 :::