Internacionalización

lh-ui-plus incorpora soporte de internacionalización y proporciona paquetes de idioma para chino (zh-CN) e inglés (en-US). Admite el cambio en tiempo de ejecución, paquetes de idioma personalizados y la carga a demanda.

Configuración global

El idioma global se configura mediante la prop locale de LhConfigProvider.

Composition API

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <LhConfigProvider :locale="messages">
    <LhInput placeholder="Escribe un contenido" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      Cambiar de idioma
    </LhButton>
  </LhConfigProvider>
</template>

Options API

<script>
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  data() {
    return { locale: 'zh-CN' }
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhInput placeholder="Escribe un contenido" />
    <LhButton @click="toggleLocale">Cambiar de idioma</LhButton>
  </LhConfigProvider>
</template>

Uso de la API lhlocale

lhlocale es la instancia global de idioma; ofrece una API singleton, adecuada para el cambio de idioma entre componentes.

Composition API

<script setup lang="ts">
import { ref, computed } from 'vue'
import { lhlocale, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')

function toggle() {
  const next = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'
  lhlocale.use({ locale: next, messages: next === 'zh-CN' ? zhCN : enUS })
  locale.value = next
}

const placeholder = computed(() => lhlocale.t('input.placeholder'))
</script>

<template>
  <LhInput :placeholder="placeholder" />
  <LhButton @click="toggle">Cambiar de idioma</LhButton>
</template>

Options API

<script>
import { lhlocale, zhCN, enUS } from '@lh-ui/vue3'

export default {
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    placeholder() {
      return lhlocale.t('input.placeholder')
    },
  },
  methods: {
    toggle() {
      const next = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
      lhlocale.use({ locale: next, messages: next === 'zh-CN' ? zhCN : enUS })
      this.locale = next
    },
  },
}
</script>

<template>
  <LhInput :placeholder="placeholder" />
  <LhButton @click="toggle">Cambiar de idioma</LhButton>
</template>

Estructura del paquete de idioma

Los paquetes de idioma siguen rutas de claves separadas por puntos, cuya jerarquía se corresponde con la de los módulos de componentes:

// zh-CN.ts
export default {
  common: { loading: '加载中' },
  input: { placeholder: '请输入', password: '密码' },
  select: { placeholder: '请选择', noMatch: '无匹配数据', noData: '暂无数据' },
  form: { validateFailed: '校验失败', required: '此项为必填' },
  datepicker: { now: '此刻', today: '今天', cancel: '取消', confirm: '确定' },
  timepicker: { now: '此刻', confirm: '确定', cancel: '取消' },
  cascader: { placeholder: '请选择', noMatch: '无匹配数据' },
  dialog: { close: '关闭对话框' },
  // ... 更多组件语言
}

Los dos bloques anteriores reproducen el contenido real de paquetes de idioma concretos; los valores se muestran tal cual (en su propio idioma) porque describen paquetes fuente y no demostraciones traducidas.

Paquetes de idioma personalizados

Añadir un idioma nuevo

import { lhlocale } from '@lh-ui/vue3'

const jaJP = {
  input: { placeholder: '入力してください', password: 'パスワード' },
  select: { placeholder: '選択してください', noMatch: '該当なし', noData: 'データなし' },
  form: { validateFailed: '検証失敗', required: '必須アイテムです' },
}

// Se registra como 'ja-JP'
lhlocale.add('ja-JP', jaJP)
lhlocale.setLocale('ja-JP')

Sobrescribir las traducciones predeterminadas

import { lhlocale, zhCN } from '@lh-ui/vue3'

const customZh = {
  ...zhCN,
  input: {
    placeholder: '自定义占位符',
    password: '密码',
  },
}

lhlocale.use({ locale: 'zh-CN', messages: customZh })

Estado reactivo

Los componentes utilizan lhlocale.version para la actualización reactiva. Al cambiar de idioma, version se incrementa automáticamente, lo que provoca que los computed que dependen de ese valor se recalculen.

Composition API

<script setup lang="ts">
import { computed } from 'vue'
import { lhlocale } from '@lh-ui/vue3'

const t = (path: string) => lhlocale.t(path)
const currentLocale = computed(() => lhlocale.getLocale())
</script>

Options API

<script>
import { lhlocale } from '@lh-ui/vue3'

export default {
  computed: {
    currentLocale() {
      return lhlocale.getLocale()
    },
  },
  methods: {
    t(path) {
      return lhlocale.t(path)
    },
  },
}
</script>

Buenas prácticas

1. Dar prioridad a LhConfigProvider — es la forma recomendada; al pasar el paquete a través de la prop locale, todos los componentes secundarios lo usan automáticamente
2. Alineación completa del paquete de idioma — al añadir un paquete nuevo, asegúrate de cubrir los textos clave de todos los componentes
3. Evitar la codificación rígida — coloca los textos visibles para el usuario en el paquete de idioma y obténlos de forma dinámica con lhlocale.t()
4. Idioma predeterminado — el idioma predeterminado del proyecto es zh-CN (definido mediante la constante LH_LANGUAGE_DEFAULT)