국제화

lh-ui-plus는 국제화를 내장 지원하며, 중국어(zh-CN)와 영어(en-US) 언어 패을 제공합니다. 런타임 전환, 사용자 정의 언어 패, 필요할 때 가져오기를 지원합니다.

전역 구성

LhConfigProvider의 locale prop으로 전역 언어를 구성합니다.

Composition API

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

const locale = ref('ko-KR')
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, enUS } from '@lh-ui/vue3'
import koKR from '@lh-ui/share/locales/lang/ko-KR'

export default {
  data() {
    return { locale: 'ko-KR', koKR, enUS }
  },
  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, enUS } from '@lh-ui/vue3'
import koKR from '@lh-ui/share/locales/lang/ko-KR'

const locale = ref('ko-KR')

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

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

<template>
  <LhInput :placeholder="placeholder" />
  <LhButton @click="toggle">언어 전환</LhButton>
</template>

Options API

<script>
import { lhlocale, enUS } from '@lh-ui/vue3'
import koKR from '@lh-ui/share/locales/lang/ko-KR'

export default {
  data() {
    return { locale: 'ko-KR' }
  },
  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 === 'ko-KR' ? koKR : 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 상수로 정의됨)