Nuxt UI v3-alpha 已发布！

试用一下
组件

选择

GitHub
显示一个选择字段。

用法

Select 组件是原生 <select> HTML 元素的包装器。对于更高级的使用案例，如搜索或多选，请考虑使用 SelectMenu 组件。

使用 v-model 使 Select 组件与 options 属性一起使用，传递字符串或对象的数组。

<script setup lang="ts">
const countries = ['United States', 'Canada', 'Mexico']

const country = ref(countries[0])
</script>

<template>
  <USelect v-model="country" :options="countries" />
</template>

当使用对象时，您可以通过 option-attribute 属性（默认值为 label）配置用于显示的字段，并通过 value-attribute 属性（默认值为 value）配置用于比较的字段。

在对象中添加 disabled 键将控制选项的禁用状态。

<script setup lang="ts">
const countries = [{
  name: 'United States',
  value: 'US'
}, {
  name: 'Canada',
  value: 'CA',
  disabled: true
}, {
  name: 'Mexico',
  value: 'MX'
}]

const country = ref('CA')
</script>

<template>
  <USelect v-model="country" :options="countries" option-attribute="name" />
</template>

样式

使用 color 和 variant 属性更改 Select 组件的视觉样式。

<template>
  <USelect
    color="primary"
    variant="outline"
    :options="['United States', 'Canada', 'Mexico']"
  />
</template>

除了 ui.colors 对象中的所有颜色之外，您还可以使用 white（默认）和 gray 颜色及其预定义的变体。

白色

<template>
  <USelect
    color="white"
    variant="outline"
    :options="['United States', 'Canada', 'Mexico']"
  />
</template>

灰色

<template>
  <USelect
    color="gray"
    variant="outline"
    :options="['United States', 'Canada', 'Mexico']"
  />
</template>

尺寸

使用 size 属性更改 Select 组件的大小。

<template>
  <USelect size="sm" :options="['United States', 'Canada', 'Mexico']" />
</template>

占位符

使用 placeholder 属性设置占位符文本。

<template>
  <USelect
    placeholder="Search..."
    :options="['United States', 'Canada', 'Mexico']"
  />
</template>

图标

通过 icon 属性使用来自 Iconify 的任何图标，使用以下模式：i-{collection_name}-{icon_name}。

使用 trailing-icon 属性设置不同的图标，或在 ui.select.default.trailingIcon 中全局更改它。默认值为 i-heroicons-chevron-down-20-solid。

<template>
  <USelect
    icon="i-heroicons-magnifying-glass-20-solid"
    color="white"
    size="sm"
    :options="['United States', 'Canada', 'Mexico']"
    placeholder="Search..."
  />
</template>

禁用

使用 disabled 属性禁用 Select 组件。

<template>
  <USelect
    disabled
    :options="['United States', 'Canada', 'Mexico']"
    placeholder="Search..."
  />
</template>

在对象 options 数组中添加一个带有真值的 disabled 键，以禁用单个选项。

加载中

使用 loading 属性显示加载图标并禁用输入框。

使用 loading-icon 属性设置不同的图标，或在 ui.select.default.loadingIcon 中全局更改它。默认值为 i-heroicons-arrow-path-20-solid。

<template>
  <USelect
    loading
    icon="i-heroicons-magnifying-glass-20-solid"
    :options="['United States', 'Canada', 'Mexico']"
    placeholder="Search..."
  />
</template>

填充

使用 padded 属性移除 Select 组件的填充。

<template>
  <USelect
    :padded="false"
    placeholder="Search..."
    :options="['United States', 'Canada', 'Mexico']"
    variant="none"
    class="w-full"
  />
</template>

插槽

leading

使用 #leading 插槽设置前置图标的内容。

<template>
  <USelect
    :options="['United States', 'Canada', 'Mexico']"
    placeholder="Search..."
  >
    <template #leading>
      <UIcon name="i-heroicons-flag" class="w-5 h-5" />
    </template>
  </USelect>
</template>

trailing

使用 #trailing 插槽设置后置图标的内容。

<template>
  <USelect placeholder="Search...">
    <template #trailing>
      <UIcon name="i-heroicons-arrows-up-down-20-solid" class="w-5 h-5" />
    </template>
  </USelect>
</template>

属性

name
字符串
null
尺寸
SelectSize
null
"md""2xs""xs""sm""lg""xl"
颜色
字符串
config.default.color
icon
字符串
null
ui
{ form?: string; placeholder?: string; default?: DeepPartial<{ size: string; color: string; variant: string; loadingIcon: string; trailingIcon: string; }, any>; wrapper?: string; base?: string; ... 9 more ...; icon?: DeepPartial<...>; } & { ...; } & { ...; }
{}
id
字符串
null
modelValue
字符串 | 数字 | 对象
""
options
未知[]
[]
变体
SelectVariant
config.default.variant
"outline""none"
占位符
字符串
null
loadingIcon
字符串
config.default.loadingIcon
leadingIcon
字符串
null
trailingIcon
字符串
config.default.trailingIcon
optionAttribute
字符串
"label"
valueAttribute
字符串
"value"
selectClass
字符串
null
required
布尔值
false
禁用
布尔值
false
leading
布尔值
false
trailing
布尔值
false
加载中
布尔值
false
填充
布尔值
true

配置

{
  wrapper: 'relative',
  base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
  form: 'form-select',
  rounded: 'rounded-md',
  placeholder: 'text-gray-400 dark:text-gray-500',
  file: {
    base: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:bg-transparent file:border-0 file:p-0 file:outline-none'
  },
  size: {
    '2xs': 'text-xs',
    xs: 'text-xs',
    sm: 'text-sm',
    md: 'text-sm',
    lg: 'text-sm',
    xl: 'text-base'
  },
  gap: {
    '2xs': 'gap-x-1',
    xs: 'gap-x-1.5',
    sm: 'gap-x-1.5',
    md: 'gap-x-2',
    lg: 'gap-x-2.5',
    xl: 'gap-x-2.5'
  },
  padding: {
    '2xs': 'px-2 py-1',
    xs: 'px-2.5 py-1.5',
    sm: 'px-2.5 py-1.5',
    md: 'px-3 py-2',
    lg: 'px-3.5 py-2.5',
    xl: 'px-3.5 py-2.5'
  },
  leading: {
    padding: {
      '2xs': 'ps-7',
      xs: 'ps-8',
      sm: 'ps-9',
      md: 'ps-10',
      lg: 'ps-11',
      xl: 'ps-12'
    }
  },
  trailing: {
    padding: {
      '2xs': 'pe-7',
      xs: 'pe-8',
      sm: 'pe-9',
      md: 'pe-10',
      lg: 'pe-11',
      xl: 'pe-12'
    }
  },
  color: {
    white: {
      outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
    },
    gray: {
      outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
    }
  },
  variant: {
    outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
    none: 'bg-transparent focus:ring-0 focus:shadow-none'
  },
  icon: {
    base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
    color: 'text-{color}-500 dark:text-{color}-400',
    loading: 'animate-spin',
    size: {
      '2xs': 'h-4 w-4',
      xs: 'h-4 w-4',
      sm: 'h-5 w-5',
      md: 'h-5 w-5',
      lg: 'h-5 w-5',
      xl: 'h-6 w-6'
    },
    leading: {
      wrapper: 'absolute inset-y-0 start-0 flex items-center',
      pointer: 'pointer-events-none',
      padding: {
        '2xs': 'px-2',
        xs: 'px-2.5',
        sm: 'px-2.5',
        md: 'px-3',
        lg: 'px-3.5',
        xl: 'px-3.5'
      }
    },
    trailing: {
      wrapper: 'absolute inset-y-0 end-0 flex items-center',
      pointer: 'pointer-events-none',
      padding: {
        '2xs': 'px-2',
        xs: 'px-2.5',
        sm: 'px-2.5',
        md: 'px-3',
        lg: 'px-3.5',
        xl: 'px-3.5'
      }
    }
  },
  default: {
    size: 'sm',
    color: 'white',
    variant: 'outline',
    loadingIcon: 'i-heroicons-arrow-path-20-solid',
    trailingIcon: 'i-heroicons-chevron-down-20-solid'
  }
}

范围

显示一个范围字段

选择菜单

显示具有高级功能的选择菜单。