国际化

介绍

Dangoui 支持国际化，目前支持的语言有：

中文(zh-CN) 默认
英文(en-US)

使用

在 App.vue 中引入

// App.vue 中
import { useLocale } from 'dangoui/locale'
import enUS from 'dangoui/lang/en_US'
const { registerLocale, locale } = useLocale()

// 注册英文语言包
registerLocale('en_US', enUS);
// 使用英文语言包
locale.value = 'en_US'

在组件中使用

<template>
  <div>
    <button @click="changeToEnglish">Change to English</button>
  </div>
</template>

<script setup lang="ts">
// 在任何需要切换语言的组件中
import { useLocale } from 'dangoui/locale'
import enUS from 'dangoui/lang/en_US'

const { registerLocale, locale } = useLocale()

registerLocale('en_US', enUS)

// 切换到英文
function changeToEnglish() {
  locale.value = 'en_US'
}
</script>

各种示例

<template>
  <PreviewBlock title="支持展开收起">
    <DuButton @click="switchLanguage">切换 {{ locale === 'zh_CN' ? 'English' : '中文' }}</DuButton>
    <DuTagsPanel
      :tags="tags"
      @add="handleAddClick"
      @remove="handleRemove"
      :collapse-count="5"
      can-toggle
    />
  </PreviewBlock>

</template>

<script setup lang="ts">
import { DuTagsPanel, DuButton } from 'dangoui'
import { useLocale } from 'dangoui/locale'
import enUS from 'dangoui/lang/en_US'
import zhCN from 'dangoui/lang/zh_CN'

const { registerLocale, locale } = useLocale()

registerLocale('en_US', enUS)
registerLocale('zh_CN', zhCN)

const tags = ['你好', 'Hello', '안녕하세요', 'Bonjour', 'こんにちは', 'Hallo'].map(text => ({ value: text, text, canRemove: text !== '你好' }))

function handleAddClick() {
  console.log('[demo] add click')
}

function handleRemove(item) {
  console.log('[demo] remove', item.value)
}

function switchLanguage() {
  console.log('[demo] change to english')
  locale.value = (locale.value === 'zh_CN' ? 'en_US' : 'zh_CN')
  console.log('[demo] locale', locale.value)
}
</script>