Select 选择器

在清晰的选项列表中做出选择。

基础用法

交互预览

显示模式选择适合当前场景的信息密度。

已选：focus

启动模式启动前请选择一个可用模式。

不可用选择器

查看 Vue 源码

Vue · TypeScript

<script setup lang="ts">
import { AgmButton, AgmSelect } from 'augma'
import { shallowRef } from 'vue'

const mode = shallowRef('focus')
const destination = shallowRef<string>()
const submitted = shallowRef(false)
const options = [
  { label: '专注模式', value: 'focus' },
  { label: '探索模式', value: 'explore' },
  { label: '不可用模式', value: 'locked', disabled: true },
]
</script>

<template>
  <div class="example-stack">
    <AgmSelect v-model="mode" label="显示模式" hint="选择适合当前场景的信息密度。" :options="options" />
    <output>已选：{{ mode }}</output>
    <AgmSelect
      v-model="destination"
      label="启动模式"
      hint="启动前请选择一个可用模式。"
      :error="submitted && !destination ? '请选择启动模式' : undefined"
      :options="options"
      required
    />
    <AgmButton variant="outline" @click="submitted = true">确认启动模式</AgmButton>
    <output v-if="submitted && destination" role="status">启动模式已确认。</output>
    <AgmSelect label="不可用选择器" :options="options" disabled />
  </div>
</template>

<style scoped>
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

属性	类型	默认值	说明
id	string	undefined	可选的触发元素 ID，默认自动生成
hint	string	undefined	辅助说明，与选择器关联并在错误时保留
error	string	undefined	错误说明，同时标记无效状态
required	boolean	false	表单必选项
modelValue	string	undefined	通过 v-model 更新
label	string	必填	可见标签
options	{ label: string, value: string, disabled?: boolean }[]	必填	value 必须为非空且唯一的字符串
placeholder	string	'请选择'	未选择提示
disabled	boolean	false	禁止选择
name	string	undefined	表单字段名

事件

• update:modelValue(string)

键盘操作与使用边界

Enter / Space 打开，方向键移动，Enter 选择，Escape 关闭；支持字符搜索并跳过禁用项。class / style 保留在字段容器，其余额外属性和监听器传递到触发按钮；hint / error 自动关联。

安装

import { AgmSelect } from 'augma'
import 'augma/style.css'

复制可编辑源码：

pnpm dlx [email protected] add https://augma.yyj.moe/r/select.json