国際化

lh-ui-plus は国際化サポートを内蔵し、中国語（zh-CN）と英語（en-US）の 2 つの言語パックを提供しています。実行時の切り替え、カスタム言語パック、オンデマンド読み込みをサポートしています。

グローバル設定

LhConfigProvider の locale prop でグローバルな言語を設定します。

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="内容を入力してください" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      言語を切り替え
    </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="内容を入力してください" />
    <LhButton @click="toggleLocale">言語を切り替え</LhButton>
  </LhConfigProvider>
</template>

lhlocale API の使用

lhlocale はグローバルな言語インスタンスで、シングルトンの API を提供し、コンポーネントをまたぐ言語切り替えに適しています。

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">言語を切り替え</LhButton>
</template>

<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">言語を切り替え</LhButton>
</template>

言語パックの構造

言語パックはドット区切りのキーパスに従い、階層がコンポーネントのモジュールに対応しています：

// 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: '关闭对话框' },
  // ... 更多组件语言
}

カスタム言語パック

新しい言語の追加

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

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

// 'ja-JP' として登録
lhlocale.add('ja-JP', jaJP)
lhlocale.setLocale('ja-JP')

デフォルトの翻訳を上書きする

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

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

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

リアクティブな状態

コンポーネントは lhlocale.version を使ってリアクティブな更新を実現します。言語の切り替え時に version が自動的にインクリメントされ、この値に依存する computed が再計算されます。

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>

ベストプラクティス

1. LhConfigProvider を優先する — 最も推奨される方法です。locale prop で渡すだけで、すべての子コンポーネントが自動的にそれを使用します
2. 言語パックを完全に揃える — 新しい言語パックを追加する際は、すべてのコンポーネントの主要なテキストを網羅してください
3. ハードコードを避ける — ユーザーに見えるテキストは言語パックに置き、lhlocale.t() で動的に取得してください
4. デフォルト言語 — プロジェクトのデフォルト言語は zh-CN です（LH_LANGUAGE_DEFAULT 定数で定義）