Select 选择框
基础用法
用于简单单选的数据选择器，点击选择框后在锚点附近弹出选项列表，点选即完成选择。
- 数据项支持左右双图标、文字样式与禁用
- 选中态支持背景高亮与前置对钩两种模式，展开时自动滚动定位到当前选中项
- 下方空间不足时自动翻转到上方；在弹层内使用时沿用弹出层层级，遮罩拦截底层触摸滚动
必须放在 sn-page 下
组件内含弹出层，使用时需放在 sn-page 根节点下。
平台差异
HarmonyOS 端弹出菜单阴影使用较轻的默认值，仍可通过弹层样式自定义；菜单透明度由入退场动画控制，遮罩独立淡入淡出。
vue
<template>
<sn-select v-model="value" :data="data" width="200px"></sn-select>
</template>更多演示请下载 demo 查看
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| v-model | 当前选中项的索引 | Number | 0 | - |
| data | 选项数据源 | SnSelectItem[] | [] | - |
| width | 选择框宽度（弹出层宽度与其一致），支持 $ 前缀按间距乘数缩放 | String | Number | 100px | - |
| bgColor | 选择框背景颜色 | String | $front | - |
| popBgColor | 弹出层背景颜色 | String | $front | - |
| selectedMode | 选中项展示模式：bg 为选中项背景高亮，check 为选中项前置对钩图标 | String | bg | bg | check |
| selectedItemBgColor | 选中项背景颜色（selectedMode 为 bg 时生效） | String | $infoDark | - |
| selectedItemTextColor | 选中项文字颜色（selectedMode 为 bg 时生效） | String | $primaryDark | - |
| checkIconColor | 选中项对钩图标颜色（selectedMode 为 check 时生效） | String | $primary | - |
| checkIconSize | 选中项对钩图标大小（selectedMode 为 check 时生效） | String | Number | $14 | - |
| textSize | 选择框文本大小 | String | Number | $14 | - |
| textColor | 选择框文本颜色（下拉箭头同色） | String | $text | - |
| leftIcon | 选择框左侧默认图标 | String | '' | - |
| rightIcon | 选项右侧默认图标 | String | '' | - |
| leftIconColor | 左侧图标默认颜色 | String | $text | - |
| rightIconColor | 右侧图标默认颜色 | String | $text | - |
| leftIconSize | 左侧图标默认尺寸 | String | Number | $18 | - |
| rightIconSize | 右侧图标默认尺寸 | String | Number | $16 | - |
| borderRadius | 选择框与弹出层圆角大小 | String | Number | $8 | - |
| maxHeight | 弹出层选项列表最大高度，支持 $ 前缀按间距乘数缩放 | String | Number | 500px | - |
| maskOpacity | 弹出层蒙层透明度 | Number | 0 | 0~1 |
| aniTime | 弹出层动画时长 | String | Number | $200 | - |
| disabled | 是否禁用选择框（整体半透明且不可点击） | Boolean | false | true | false |
| itemBorder | 选项之间是否显示分隔线（最后一项不显示） | Boolean | true | true | false |
| itemStyle | 自定义选项（sn-cell）样式 | SnStyleValue | - | - |
| itemClass | 自定义选项外部样式类 | String | - | - |
| itemHoverStyle | 自定义选项按压态样式 | SnStyleValue | background: var(--sn-info); | - |
| itemTextStyle | 自定义选项文字样式 | SnStyleValue | - | - |
| itemIconStyle | 自定义选项图标样式 | SnStyleValue | - | - |
| hoverStyle | 选择框按压态样式 | SnStyleValue | background: var(--sn-info); | - |
| hoverStartTime | 按压态启动延时（ms） | Number | 50 | - |
| hoverStayTime | 松手后按压态保持时长（ms） | Number | 0 | - |
| hoverTransTime | 按压态过渡动画时长 | String | Number | - （默认取 $snui.aniTimeShort） | - |
| customStyle | 自定义选择框根节点样式 | SnStyleValue | - | - |
| textStyle | 自定义选择框文本样式 | SnStyleValue | - | - |
| textClass | 自定义选择框文本外部样式类 | String | - | - |
| popStyle | 自定义弹出层容器样式 | SnStyleValue | - | - |
| popClass | 自定义弹出层容器外部样式类 | String | - | - |
sn-select 专用选项类型，支持左右图标和选项级文字样式。
| 字段 | 类型 | 必备 | 描述 |
|---|---|---|---|
| id | String | 否 | 项 id |
| text | String | 否 | 显示文本 |
| icon | String | 否 | 兼容字段，作为左侧图标 |
| leftIcon | String | 否 | 左侧图标名 |
| rightIcon | String | 否 | 右侧图标名 |
| value | String | 否 | 关联值 |
| color | String | 否 | 文本颜色 |
| textColor | String | 否 | 文本颜色 |
| textSize | String | Number | 否 | 文本字号 |
| leftIconColor | String | 否 | 左侧图标颜色 |
| rightIconColor | String | 否 | 右侧图标颜色 |
| leftIconSize | String | Number | 否 | 左侧图标尺寸 |
| rightIconSize | String | Number | 否 | 右侧图标尺寸 |
| disabled | Boolean | 否 | 是否禁用 |
事件
| 名称 | 类型 | 说明 |
|---|---|---|
| change | (value: Number) => Void | 选中项变化时触发，value 即为选中项索引 |
