区域设置选择

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

用法

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

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

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

Locale 列表

使用 locales prop，并传入来自 @nuxt/ui/locale 的 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>

您可以只传入应用程序中需要的 locale

<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

属性

属性	默认值	类型
`locales`		`Locale<any>[]`
`disabled`		`boolean` 当为 `true` 时，阻止用户与列表框交互
`color`	`'主要'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`尺寸`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`字符串 \| 对象` 用于打开菜单的图标。
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`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 中渲染菜单。
`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; itemLabel?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; }

更新日志

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

ColorModeSwitch

一个用于切换浅色和深色模式的开关。