Select 选择器

MoSelect 基于 Headless UI Listbox 封装，用于从选项列表中选择单个值。普通值直接使用 v-model；对象值建议传 by 指定比较字段，否则需要保持对象引用一致。

基础用法

Light

当前值：draft

Dark

当前值：draft

<script setup lang="ts">
import { ref } from "vue";

const value = ref("draft");
const options = [
  { label: "草稿", value: "draft" },
  { label: "已发布", value: "published" },
  { label: "已归档", value: "archived" }
];
</script>

<template>
  <MoSelect v-model="value" :options="options" placeholder="请选择状态" />
</template>

尺寸

Light

Dark

<MoSelect size="small" :options="options" />
<MoSelect :options="options" />
<MoSelect size="large" :options="options" />

禁用状态

Light

Dark

<MoSelect v-model="value" :options="options" />
<MoSelect v-model="value" :options="options" disabled />

const options = [
  { label: "管理员", value: "admin" },
  { label: "访客", value: "guest", disabled: true }
];

自定义展示

使用 label 插槽自定义按钮内展示内容，使用 option 插槽自定义下拉选项内容。

Light

Dark

<MoSelect v-model="role" :options="roleOptions">
  <template #label="{ option, label }">
    {{ option ? `角色：${label}` : label }}
  </template>

  <template #option="{ option, selected }">
    <strong>{{ option.label }}</strong>
    <small>{{ selected ? "当前选择" : "可切换" }}</small>
  </template>
</MoSelect>

对象值与 by

当 value 是对象时，传 by="id" 可以用对象字段进行比较。

Light

当前节点：华东

Dark

当前节点：华东

<script setup lang="ts">
const options = [
  { label: "华东节点", value: { id: "cn-east", region: "华东" } },
  { label: "华南节点", value: { id: "cn-south", region: "华南" } }
];
const value = ref({ id: "cn-east", region: "华东" });
</script>

<template>
  <MoSelect v-model="value" :options="options" by="id" />
</template>

Change 事件

Light

等待选择

Dark

等待选择

<MoSelect v-model="value" :options="options" @change="handleChange" />

function handleChange(value, option) {
  console.log(value, option);
}

Horizontal

horizontal 会传给 Headless UI Listbox，适合需要横向键盘导航的场景。

<MoSelect v-model="value" :options="options" horizontal />

API

属性	说明	类型	默认值
v-model	选中值	string | number | boolean | object | null	null
options	选项列表	SelectOption[]	[]
theme	主题	light | dark	light
size	尺寸	small | default | large	default
placeholder	未选择时的占位文本	string	请选择
disabled	是否整体禁用	boolean	false
horizontal	是否启用横向键盘导航	boolean	false
name	原生表单字段名	string	-
by	对象值比较字段或比较函数	string | ((a, b) => boolean)	-

SelectOption

字段	说明	类型
label	展示文本	string
value	选项值	SelectValue
disabled	是否禁用当前选项	boolean

Events

事件	说明	参数
change	选中值变化时触发	value, option

Slots

插槽	说明
label	自定义按钮内展示内容，参数 { option, label }
option	自定义下拉选项内容，参数 { option, active, selected, disabled }