区域设置选择

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

用法

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
    v-model="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
    v-model="locale"
    :locales="Object.values(locales)"
    @update:model-value="setLocale($event)"
  />
</template>

API

属性

属性	默认值	类型
`语言环境`		`Locale<any>[]`
`尺寸`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`color`	`'主要'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`字符串 \| 对象` 用于打开菜单的图标。
`selectedIcon`	`appConfig.ui.icons.check`	`字符串 \| 对象` 选中项时显示的图标。
`内容`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`ComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>` 菜单的内容。
`arrow`	`false`	`boolean \| ComboboxArrowProps` 在菜单旁边显示一个箭头。
`portal`	`true`	`string \| false \| true \| HTMLElement` 在 portal 中渲染菜单。
`disabled`		`boolean` 当为 `true` 时，阻止用户与列表框交互
`modelValue`		`string`
`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; }

更新日志

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

ColorModeSwitch

用于在亮模式和暗模式之间切换的开关。