区域设置选择

一个用于切换语言环境的选择框。

用法

LocaleSelect 组件扩展了 SelectMenu 组件，因此您可以传入任何属性，例如 color、variant、size 等。

此组件旨在与 i18n 系统一起使用。在指南中了解更多信息。

标志使用 Unicode 字符显示。这可能会导致不同的显示，例如 Windows 下的 Microsoft Edge 会显示 ISO 3166-1 alpha-2 代码，因为操作系统字体中未附带标志图标。

语言环境

使用 locales 属性，其值为来自 @nuxt/ui/locale 的语言环境数组。

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'

const locale = ref('en')
</script>

<template>
  <ULocaleSelect v-model="locale" :locales="Object.values(locales)" class="w-48" />
</template>

您可以只传递应用程序中需要的语言环境

<script setup lang="ts">
import { en, es, fr } from '@nuxt/ui/locale'

const locale = ref('en')
</script>

<template>
  <ULocaleSelect v-model="locale" :locales="[en, es, fr]" />
</template>

动态区域设置

您可以将其与 Nuxt i18n 一起使用

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'

const { locale, setLocale } = useI18n()
</script>

<template>
  <ULocaleSelect
    :model-value="locale"
    :locales="Object.values(locales)"
    @update:model-value="setLocale($event)"
  />
</template>

您可以将其与 Vue i18n 一起使用

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@nuxt/ui/locale'

const { locale, setLocale } = useI18n()
</script>

<template>
  <ULocaleSelect
    :model-value="locale"
    :locales="Object.values(locales)"
    @update:model-value="setLocale($event)"
  />
</template>

API

属性

属性	默认值	类型
`modelValue`		`string`
`语言环境`		`Locale<any>[]`
`name`		`string` 字段的名称。作为名称/值对的一部分随其所属表单提交。
`avatar`		`AvatarProps` 在左侧显示头像。
`尺寸`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`loading`		`boolean` 当为 `true` 时，将显示加载图标。
`图标`		`any` 根据 `leading` 和 `trailing` 属性显示图标。
`color`	`'primary'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`autofocus`		`boolean`
`disabled`		`boolean` 当为 `true` 时，阻止用户与列表框交互
`open`		`boolean` 组合框的受控打开状态。可以通过 `v-model:open` 绑定。
`defaultOpen`		`boolean` 组合框初次渲染时的打开状态。当您不需要控制其打开状态时使用。
`resetSearchTermOnBlur`	`true`	`boolean` 当组合框输入失去焦点时是否重置搜索词
`resetSearchTermOnSelect`	`true`	`boolean` 当组合框值被选中时是否重置搜索词
`highlightOnHover`		`boolean` 当 `true` 时，鼠标悬停在项目上会触发高亮显示。
`defaultValue`		`string` SelectMenu 初始渲染时的值。当您不需要控制 SelectMenu 的状态时使用。
`multiple`		`false` 是否可以选择多个选项。
`required`		`boolean`
`id`		`string`
`placeholder`		`string` 选择框为空时的占位符文本。
`searchInput`	`false`	`boolean \| InputProps<AcceptableValue>` 是否显示搜索输入框。可以是对象，用于向输入框传递附加属性。 `{ placeholder: '搜索...', variant: 'none' }`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`any` 用于打开菜单的图标。
`selectedIcon`	`appConfig.ui.icons.check`	`any` 选中项时显示的图标。
`内容`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`ComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>` 菜单的内容。
`arrow`	`false`	`boolean \| ComboboxArrowProps` 在菜单旁边显示一个箭头。
`portal`	`true`	`string \| false \| true \| HTMLElement` 在 portal 中渲染菜单。
`virtualize`	`false`	`boolean \| { overscan?: number ; estimateSize?: number \| undefined; } \| undefined` 为大型列表启用虚拟化。注意：启用后，由于 Reka UI 的限制 (https://github.com/unovue/reka-ui/issues/1885).
`valueKey`	`'code'`	`"code"` 当 `items` 是一个对象数组时，选择要用作值的字段而不是对象本身。
`labelKey`	`'name'`	"name" \| "code" \| "dir" \| "messages" \| `messages.${string}` 当 `items` 是对象数组时，选择用作标签的字段。
`描述键`	`'description'`	"name" \| "code" \| "dir" \| "messages" \| `messages.${string}` 当 `items` 是一个对象数组时，选择要用作描述的字段。
`高亮`		`boolean` 高亮环形颜色，如同焦点状态。
`createItem`	`false`	`boolean \| "always" \| { position?: "top" \| "bottom" ; when?: "empty" \| "always" \| undefined; } \| undefined` 确定是否可以添加选项中不存在的自定义用户输入。
`filterFields`	`[labelKey]`	`string[]` 用于过滤项目的字段。
`ignoreFilter`	`false`	`boolean` 当 `true` 时，禁用默认过滤器，这对于自定义过滤（useAsyncData, useFetch 等）很有用。
`autofocusDelay`		`number`
`前置`		`boolean` 当为 `true` 时，图标将显示在左侧。
`leadingIcon`		`any` 在左侧显示图标。
`尾部`		`boolean` 当为 `true` 时，图标将显示在右侧。
`loadingIcon`	`appConfig.ui.icons.loading`	`any` 当 `loading` prop 为 `true` 时显示的图标。
`ui`		{ base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; arrow?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; }

更新日志

33315— feat: 添加阿尔巴尼亚语 (#5461)

5b177— feat: 扩展原生 HTML 属性 (#5348)

5cb65— 特性：导入 @nuxt/ui-pro 组件

ColorModeSwitch

一个用于切换亮/暗模式的开关。