Select 选择器

AuSelect 使用 Aurora Plus 的紧凑列表弹层呈现选项，并统一尺寸、焦点、禁用态和错误态。选项仍通过熟悉的 option 与 optgroup 声明。

基础用法

选项与尺寸

下拉选项使用轻量材质、状态色和选中标记，同时提供默认、小尺寸和禁用状态。

文档格式编辑器字号不可用选项

当前选择：Markdown，14 px

vue

<template>
  <div class="select-demo">
    <label class="select-demo__field">
      <span>文档格式</span>
      <AuSelect v-model="format">
        <option value="markdown">Markdown</option>
        <option value="html">HTML</option>
        <option value="text">纯文本</option>
      </AuSelect>
    </label>
    <label class="select-demo__field">
      <span>编辑器字号</span>
      <AuSelect v-model="fontSize" size="small">
        <option value="13">13 px</option>
        <option value="14">14 px</option>
        <option value="16">16 px</option>
      </AuSelect>
    </label>
    <label class="select-demo__field">
      <span>不可用选项</span>
      <AuSelect model-value="system" disabled>
        <option value="system">跟随系统</option>
      </AuSelect>
    </label>
    <p class="select-demo__result">当前选择：{{ formatLabel }}，{{ fontSize }} px</p>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import { AuSelect } from 'aurora-plus';
const format = ref('markdown');
const fontSize = ref('14');
const formatLabels = {
  markdown: 'Markdown',
  html: 'HTML',
  text: '纯文本',
};
const formatLabel = computed(() => formatLabels[format.value]);
</script>
<style scoped>
.select-demo {
  display: grid;
  width: min(100%, 420px);
  gap: 14px;
}
.select-demo__field {
  display: grid;
  gap: 6px;
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
.select-demo__result {
  margin: 0;
  color: var(--au-color-text-regular);
  font-size: var(--au-font-size-small);
}
</style>

使用建议

• 选项较少且互斥时使用 AuSelect；需要执行命令的操作集合使用 AuDropdown。
• 通过默认插槽传入 option 或 optgroup；组件会将这些声明转换为统一风格的选项列表。
• 需要根据最长选项自适应宽度时使用 fit-content，并通过 max-width 限制最大宽度；超过限制后才会省略文字。
• 字段名称使用可见的 label，错误状态同时提供文字说明。
• 键盘可使用方向键、Home、End 导航，使用 Enter 或空格确认，使用 Escape 关闭。

Select API

Attributes

属性	说明	类型	默认值
modelValue	当前选中值	string / number / boolean	''
size	尺寸	small / default / large	default
disabled	是否禁用	boolean	false
invalid	是否显示错误态	boolean	false
fitContent	是否根据全部可见选项中的最长内容自适应宽度	boolean	false
maxWidth	自适应模式的最大宽度，数字会转换为 px	string / number	320
teleported	是否将选项弹层传送到目标容器	boolean	true
appendTo	选项弹层挂载目标	string / HTMLElement	'body'
zIndex	选项弹层层级	number	1200

未声明的 id、title、tabindex、aria-*、data-* 和监听器会作用于选择触发器。传入 name 与 form 时，当前值会通过隐藏字段参与表单提交；required 会映射为 aria-required。

Events

事件名	说明	参数
update:modelValue	选中值变化	(value)
change	选中值变化	(value, sourceEvent)
focus	获得焦点	(event)
blur	失去焦点	(event)

Slots

插槽名	说明
default	option 或 optgroup 选项声明

Exposes

方法或属性	说明
focus(options?)	聚焦选择框
blur()	移除焦点
open()	打开选项弹层
close()	关闭选项弹层
toggle()	切换选项弹层
selectRef	选择触发按钮引用
listboxRef	选项列表引用