Select 选择器

何时使用

从预设选项中单选一项时使用。

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { DanSelect } from '@dandan-ui/ui'

const value = ref('shanghai')
const options = [
  { label: '上海', value: 'shanghai' },
  { label: '北京', value: 'beijing' },
  { label: '深圳', value: 'shenzhen' },
]
</script>

<template>
  <DanSelect v-model="value" :options="options" style="max-width: 280px" />
</template>

可清空与禁用选项

×

<script setup lang="ts">
import { ref } from 'vue'
import { DanSelect } from '@dandan-ui/ui'

const value = ref('beijing')
const options = [
  { label: '上海', value: 'shanghai' },
  { label: '北京', value: 'beijing' },
  { label: '深圳', value: 'shenzhen' },
  { label: '杭州（禁用）', value: 'hangzhou', disabled: true },
]
</script>

<template>
  <DanSelect
    v-model="value"
    :options="options"
    clearable
    placeholder="请选择城市"
    style="max-width: 280px"
  />
</template>

尺寸

<script setup lang="ts">
import { ref } from 'vue'
import { DanSelect } from '@dandan-ui/ui'

const value = ref('a')
const options = [
  { label: '选项 A', value: 'a' },
  { label: '选项 B', value: 'b' },
]
</script>

<template>
  <div style="display: grid; gap: 12px; max-width: 280px">
    <DanSelect v-model="value" :options="options" size="small" />
    <DanSelect v-model="value" :options="options" size="default" />
    <DanSelect v-model="value" :options="options" size="large" />
  </div>
</template>

禁用

<script setup lang="ts">
import { DanSelect } from '@dandan-ui/ui'

const options = [
  { label: '选项 A', value: 'a' },
  { label: '选项 B', value: 'b' },
]
</script>

<template>
  <DanSelect
    model-value="a"
    :options="options"
    disabled
    style="max-width: 280px"
  />
</template>

API

Props

属性	说明	类型	默认值	必填
modelValue / v-model	当前选中值；清空后为 null	string | number | boolean | null	—	否
options	选项列表	SelectOption[]	[]	否
placeholder	未选择时的占位项文案	string	'请选择'	否
clearable	是否显示清空	boolean	false	否
disabled	禁用；可继承 Form	boolean	false	否
size	尺寸；未传继承 ConfigProvider	'small' | 'default' | 'large'	—	否

SelectOption

字段	说明	类型	必填
label	展示文案	string	是
value	选项值	string | number | boolean	是
disabled	是否禁用该选项	boolean	否

Events

事件名	说明	回调参数
update:modelValue	v-model 更新	(value: string | number | boolean | null) => void
change	选择变化，并联动 FormItem	(value: string | number | boolean | null) => void
clear	点击清空	() => void

Slots

当前为基础原生 select 封装，无选项级插槽。

与 Form 联用

change / blur 会触发 FormItem 校验；适合必选城市、类型等字段。

Token

变量	说明
--dan-control-height-sm/md/lg	高度
--dan-color-border / --dan-color-primary	边框与聚焦