Select - 选择器

Demo

Last Changed

7 minutes ago

select/demo.vue

当前：（未选）

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

const picked = ref('')
const options = [
  { label: '晴空蓝', value: 'sky' },
  { label: '鸢尾紫', value: 'iris' },
  { label: '兰紫粉', value: 'pink' },
  { label: '暂不可选', value: 'x', disabled: true },
]
</script>

<template>
  <div class="flex flex-col gap-3">
    <YlfSelect v-model="picked" :options="options" placeholder="选择一种颜色" />
    <p class="text-sm op-70">
      当前：{{ picked || '（未选）' }}
    </p>
  </div>
</template>

选择器：定位、键盘导航、首字母检索、滚动基于 reka-ui，外观走 token。

Props

属性	说明	类型	默认值
v-model	选中值	string	—
options	选项 { label, value, disabled? }	SelectOption[]	—
placeholder	占位文案	string	请选择
disabled	禁用	boolean	false