Nuxt UI 组件库：Select 下拉选择组件深度解析

最新推荐文章于 2025-06-09 09:14:58 发布

凌洲丰Edwina

最新推荐文章于 2025-06-09 09:14:58 发布

阅读量361

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01169/article/details/148508412

Nuxt UI 组件库：Select 下拉选择组件深度解析

ui A UI Library for Modern Web Apps, powered by Vue & TailwindCSS. 项目地址: https://gitcode.com/gh_mirrors/ui4/ui

什么是 Select 组件

Select 下拉选择组件是 Nuxt UI 中用于表单交互的核心组件之一，它允许用户从预定义的选项列表中选择一个或多个值。相比原生 HTML 的 <select> 元素，Nuxt UI 的 Select 组件提供了更丰富的定制化功能和现代化的视觉体验。

基础用法

基本选择器

最简单的用法是使用 v-model 进行双向绑定，通过 items 属性传递选项数组：

<template>
  <USelect v-model="selected" :items="['选项1', '选项2', '选项3']" />
</template>

<script setup>
const selected = ref('选项1')
</script>

初始值设置

如果不需要响应式控制，可以使用 default-value 设置初始值：

<USelect 
  default-value="默认值" 
  :items="['默认值', '其他选项']" 
/>

进阶功能

复杂数据结构

Select 组件支持多种数据结构格式：

简单数组：字符串、数字或布尔值数组
对象数组：每个选项可以包含更多元信息
嵌套数组：创建分组选项

对象数组示例

<USelect
  v-model="status"
  :items="[
    { label: '待办', value: 'todo' },
    { label: '进行中', value: 'in_progress' },
    { label: '已完成', value: 'done' }
  ]"
/>

多选功能

通过 multiple 属性启用多选模式：

<USelect
  v-model="selectedItems"
  multiple
  :items="['苹果', '香蕉', '橙子']"
/>

注意：多选模式下 v-model 应该绑定到数组。

自定义键名

使用 value-key 指定对象中哪个属性作为值：

<USelect
  v-model="selectedId"
  value-key="id"
  :items="[
    { label: '第一项', id: 'item1' },
    { label: '第二项', id: 'item2' }
  ]"
/>

视觉定制

样式变体

Select 组件提供多种视觉变体：

<USelect variant="outline" ... />
<USelect variant="subtle" ... />
<USelect variant="ghost" ... />

尺寸控制

通过 size 属性调整组件大小：

<USelect size="sm" ... />  <!-- 小号 -->
<USelect size="md" ... />  <!-- 中号（默认） -->
<USelect size="lg" ... />  <!-- 大号 -->
<USelect size="xl" ... />  <!-- 超大号 -->

颜色主题

使用 color 属性改变焦点状态下的边框颜色：

<USelect color="primary" ... />
<USelect color="gray" ... />
<USelect color="red" ... />

交互增强

图标集成

Select 组件支持多种图标集成方式：

前置图标：使用 icon 属性
后缀图标：使用 trailing-icon 属性
选中标记：使用 selected-icon 属性
加载状态：使用 loading 和 loading-icon 属性

<USelect
  icon="i-heroicons-magnifying-glass"
  trailing-icon="i-heroicons-chevron-down"
  selected-icon="i-heroicons-check"
  loading-icon="i-heroicons-arrow-path"
/>

头像集成

可以在选项或选择框中显示头像：

<USelect
  :avatar="{ src: '/avatar.png' }"
  :items="[
    { 
      label: '张三', 
      value: 'zhangsan',
      avatar: { src: '/zhangsan.png' }
    }
  ]"
/>

实用功能

分组和分隔符

通过 type 属性创建分组和分隔线：

<USelect
  :items="[
    { type: 'label', label: '水果' },
    '苹果',
    '香蕉',
    { type: 'separator' },
    { type: 'label', label: '蔬菜' },
    '胡萝卜'
  ]"
/>

异步加载

结合异步函数实现动态加载选项：

<script setup>
const items = ref([])
const loading = ref(false)

async function loadItems() {
  loading.value = true
  items.value = await fetchItems()
  loading.value = false
}
</script>

<template>
  <USelect 
    :items="items" 
    :loading="loading"
    @focus="loadItems"
  />
</template>