Select 下拉选择

锚定浮层的单选下拉框，支持自定义占位提示、尺寸、可清空、选项禁用、长列表滚动与自定义选项渲染。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-select 的用法，可按需组合。

<template>
  <mu-select v-model="value1" :options="basicOptions"></mu-select>
</template>

占位提示

未选择时显示占位文字。

<mu-select v-model="value2" :options="basicOptions" placeholder="请选择城市"></mu-select>

可清空

开启后已选项可被清空。

<mu-select v-model="value3" :options="basicOptions" :clearable="true"></mu-select>

尺寸

设置下拉框尺寸，可选 small、default、large。

<mu-select v-model="sizeSmall" :options="basicOptions" size="small"></mu-select>
<mu-select v-model="sizeDefault" :options="basicOptions" size="default"></mu-select>
<mu-select v-model="sizeLarge" :options="basicOptions" size="large"></mu-select>

禁用

禁用后不可展开选项面板。

<mu-select v-model="valueDisabled" :options="basicOptions" :disabled="true"></mu-select>

选项禁用

在选项数据中设置 disabled 可单独禁用某一项。

<mu-select v-model="valueItemDisabled" :options="disabledOptions"></mu-select>

长列表滚动

选项较多时面板内部可滚动，超出部分滚动查看。

<mu-select v-model="valueLong" :options="longOptions" placeholder="共 20 项"></mu-select>

空数据

options 为空时仅显示占位提示。

<mu-select v-model="valueEmpty" :options="emptyOptions" placeholder="无选项"></mu-select>

自定义选项

使用 option 作用域插槽自定义选项内容，选中样式需自行处理。

<mu-select v-model="valueCustom" :options="basicOptions">
  <template #option="{ option, selected }">
    <view class="opt-row">
      <view class="opt-dot" :style="'background-color:' + dotColor(option.value)"></view>
      <text class="opt-label">{{ option.label }}</text>
      <text v-if="selected" class="opt-badge">已选</text>
    </view>
  </template>
</mu-select>

选择事件

选中或清空选项时触发 change。

<mu-select v-model="valueEvent" :options="basicOptions" @change="onSelectChange"></mu-select>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
v-model	绑定值（选中项的值）	string	-
options	选项列表	SelectOption[]	[]
placeholder	未选择时的占位提示	string	请选择
size	尺寸，可选 small、default、large	string	default
disabled	是否禁用	boolean	false
clearable	是否可清空	boolean	false
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

其中 SelectOption 结构为 { label: string, value: string, disabled?: boolean }。

事件

组件支持以下事件。

事件名	说明	回调参数
change	选中或清空选项时触发	value: string

插槽

组件支持以下插槽。

名称	说明
option	自定义选项内容，插槽参数 { option: SelectOption, index: number, selected: boolean }

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：通过 v-model 绑定选中项的 value（字符串），options 的 value 建议唯一。
• 使用注意：下拉面板为浮层，嵌入滚动或 transform 容器中时位置可能偏移。
• 使用注意：使用 option 作用域插槽自定义渲染时，须自行处理选中样式。