LocaleSelect专业版

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

用法

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

此组件旨在与 i18n 系统配合使用。在指南中了解更多信息。
此组件旨在与 i18n 系统配合使用。在指南中了解更多信息。
旗帜使用 Unicode 字符显示。这可能导致显示效果不同，例如，在 Windows 上的 Microsoft Edge 中会显示 ISO 3166-1 alpha-2 代码，因为操作系统字体中不包含旗帜图标。

语言环境

使用 locales prop，传入来自 @nuxt/ui-pro/locale 的语言环境数组。

<script setup lang="ts">
import * as locales from '@nuxt/ui-pro/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-pro/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-pro/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-pro/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>[]

trailingIcon

appConfig.ui.icons.chevronDown

string

用于打开菜单的图标。

disabled

boolean

当为 true 时，阻止用户与列表框交互

color

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

尺寸

'md'

"md" | "xs" | "sm" | "lg" | "xl"

内容

{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }

ComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>

菜单的内容。

variant

'outline'

"outline" | "soft" | "subtle" | "ghost" | "none"

portal

true

string | false | true | HTMLElement

在 portal 中渲染菜单。

arrow

false

boolean | ComboboxArrowProps

在菜单旁边显示一个箭头。

selectedIcon

appConfig.ui.icons.check

string

选中项时显示的图标。

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; }

链接

一个封装了 <NuxtLink> 并带有额外属性的组件。

主内容

一个填充可用视口高度的主元素。