本文档主要用于描述 UI 系统的多语言功能

修改语言

查看代码

<template>
  <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" />
  <ShadcnSelect v-model="locale" :options="localeOptions" @on-change="changeLocale"/>
</template>

<script setup lang="ts">
import {ref} from "vue"
import { setLocale } from 'view-shadcn-ui'

const locale = ref('en')
const localeOptions = [
  {label: 'ZH-CN', value: 'zh-CN'},
  {label: 'en', value: 'en'}
]

const changeLocale = (value: any) => {
  setLocale(value.value)
}
</script>

添加语言

查看代码

<template>
  <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" />
  <ShadcnSelect v-model="locale" :options="localeOptions" @on-change="changeLocale"/>
  <ShadcnButton @click="onAddLanguage">Add ru-RU Language</ShadcnButton>
</template>

<script setup lang="ts">
import {ref} from "vue"
import { addLocale, setLocale } from 'view-shadcn-ui'

const locale = ref('en')
const localeOptions = [
  {label: 'ZH-CN', value: 'zh-CN'},
  {label: 'en', value: 'en'}
]

const changeLocale = (value: any) => {
  setLocale(value.value)
}

const onAddLanguage = async () => {
  const ruRU = {
    upload: {
      text: {
        placeholder: '<span class="text-blue-600">Нажмите для загрузки</span> или перетащите файл сюда',
        description: 'Поддерживается одиночная или массовая загрузка.',
        success: 'Загрузка выполнена успешно',
        error: 'Ошибка загрузки'
      }
    }
  }

  localeOptions.value.push({ label: 'RU-RU', value: 'ru-RU' })
  addLocale('ru-RU', ruRU)
}
</script>