Select 选择器

弹窗下拉单选组件，触发后自动弹出底部遮罩选项面板，供用户在多个备选项中进行选择。

---

代码示例

1. 基础用法 (Basic)

使用 v-model 绑定当前选中的 value 标识，通过 options 传入选项数组。

<template>
  <mu-select
    v-model="city"
    label="所在城市"
    :options="cityOptions"
    placeholder="请选择城市"
    clearable
  />
</template>

<script setup>
import { ref } from 'vue'
const city = ref('beijing')
const cityOptions = [
  { label: '北京市', value: 'beijing' },
  { label: '上海市', value: 'shanghai' },
  { label: '广州市', value: 'guangzhou' }
]
</script>

---

2. 前缀图标与左侧同行 (Prefix Icon & Left Label)

设置 prefix-icon 添加左侧矢量图标，设置 label-position="left" 实现同行横向排列。

<template>
  <mu-select
    v-model="dept"
    label="团队部门"
    label-position="left"
    prefix-icon="users"
    :options="deptOptions"
    placeholder="请选择所属部门"
    clearable
  />
</template>

---

3. 填充底色模式 (Filled)

设置 filled 开启沉浸式无边框浅色底色填充。

<template>
  <mu-select
    v-model="payType"
    label="支付类型"
    filled
    :options="payOptions"
  />
</template>

---

4. 禁用状态 (Disabled)

设置 disabled 禁止弹出选择面板。

<template>
  <mu-select model-value="shanghai" label="不可修改" disabled :options="cityOptions" />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model	选中的选项值	String | Number | Boolean	-	''
options	选项数据源列表	Array	-	[]
labelKey	自定义 label 键名	String	-	'label'
valueKey	自定义 value 键名	String	-	'value'
label	选择框外侧标题	String	-	''
title	底部弹窗面板大标题	String	-	''
labelPosition	标题布局位置	String	top | left	'top'
labelWidth	左侧标题宽度	String	-	''
placeholder	占位提示文案	String	-	'请选择'
shape	选择框边框形状	String	radius | square | round	'radius'
prefixIcon	前置文本框内矢量图标名称	String	-	''
clearable	是否显示一键清除	Boolean	true | false	false
filled	是否开启背景填充模式	Boolean	true | false	false
disabled	是否禁用选择	Boolean	true | false	false
error	是否展示标红错误状态	Boolean	true | false	false
errorMessage	底部错误提示字符串	String	-	''

---

事件说明 (Events)

事件名	说明	回调参数
change	选中项改变时触发	(value, optionItem)
update:modelValue	双向绑定更改变	(value)
clear	点击清除图标时触发	-