Select 选择器

AuSelect 使用 Aurora Plus 的紧凑列表弹层呈现选项，并统一尺寸、焦点、禁用态和错误态。

基础用法

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

当前选择：Markdown，14 px

<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-default);
  font-size: var(--au-font-size-small);
}
</style>

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

Events

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

Slots

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

Exposes

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