介绍

默认采用中文作为默认语言，允许切换不同语言。

语言切换

sard-uniapp 提供了 setLocale 函数来切换当前使用的语言。

ts

// main.ts
import { setLocale } from 'sard-uniapp'
import enUS from 'sard-uniapp/components/locale/lang/en-US'

setLocale(enUS)

js

// main.ts
import { setLocale } from 'sard-uniapp'
import enUS from 'sard-uniapp/components/locale/lang/en-US'
setLocale(enUS)

支持的语言列表

• 简体中文（zh-CN）
• 英语（en-US）
• 阿拉伯语（ar-SA）
• 越南语（vi-VN）

如果你需要使用其他的语言，欢迎贡献 PR，只需在 这里 添加一个语言配置文件即可。

动态切换

调用 setLocale 函数会更新视图中的语言。

可以对其进行封装，或者使用内置的钩子函数，例如下面的 useLocaleProvide 函数就使用到 setLocale 。

useLocaleProvide ^1.19.5+

useLocaleProvide 钩子函数会设置默认语言包，以及全局注入语言包信息，以便在任意组件获取和切换语言。

类型：

function useLocaleProvide<T extends Record<string, any>>(
  app: App,
  languages: T,
  defaultLocale: keyof T,
): void

使用：

ts

// main.ts

import zhCN from 'sard-uniapp/components/locale/lang/zh-CN'
import enUS from 'sard-uniapp/components/locale/lang/en-US'

const app = createSSRApp(App)

useLocaleProvide(
  app,
  {
    zhCN,
    enUS,
  },
  'zhCN',
)

js

// main.ts
import zhCN from 'sard-uniapp/components/locale/lang/zh-CN'
import enUS from 'sard-uniapp/components/locale/lang/en-US'
const app = createSSRApp(App)
useLocaleProvide(
  app,
  {
    zhCN,
    enUS,
  },
  'zhCN',
)

useLocale ^1.19.5+

useLocale 用于消费 useLocaleProvide 提供的数据，可以用来获取或设置当前语言。

类型：

function useLocale(): Ref<string, string> | undefined

使用：

ts

// 任意组件中

const locale = useLocale()!

// 获取
console.log(locale.value) // zhCN

// 设置
locale.value = 'enUS'

js

// 任意组件中
const locale = useLocale()
// 获取
console.log(locale.value) // zhCN
// 设置
locale.value = 'enUS'

useTranslate

useTranslate 用于获取当前语言的翻译文字。Calendar、DatetimePicker、Dialog、Form 等组件都使用到这个钩子函数。

类型：

function useTranslate(prefix?: string): {
  t: LocaleTranslate
  translate: LocaleTranslate
  select: (chain?: string) => any
}

interface LocaleTranslate {
  (
    chainOrData?: string | Record<string, number | string>,
    data?: Record<string, number | string>,
  ): string
}

说明：

• 参数 prefix：可以设置前缀来减少样板代码。
• t、translate 函数：根据链式字符串获取语言对象中嵌套的数据，如果没有找到字符串结果，则返回链式字符串本身。此函数是响应式的，放置在模板中，可在切换语言时自动更新视图。
• select 函数：根据链式字符串获取语言中任意的数据，类似于 lodash 的 get 函数。

使用：

ts

// 任意组件中

const { t } = useTranslate('calendar')

// 中文
t('start') // '开始'

// 英文
t('start') // 'start'

// 可传入数据
t('monthTitle', {
  year: 2000,
  month: '05',
}) // '2000年05月'

js

// 任意组件中
const { t } = useTranslate('calendar')
// 中文
t('start') // '开始'
// 英文
t('start') // 'start'
// 可传入数据
t('monthTitle', {
  year: 2000,
  month: '05',
}) // '2000年05月'

上面示例中，t 函数第二个参数传递了一个数据对象。

因为语言模板中可包含 ${} 占位字符，使其能够渲染非固定字符，比如，上面链式字符串 calendar.monthTitle 对应的中文模板为： ${year}年${month}月。

覆盖语言包

语言包导出一个普通的对象，可直接对其进行修改：

ts

import zhCN from 'sard-uniapp/components/locale/lang/zh-CN'

zhCN.calendar.start = '始'

js

import zhCN from 'sard-uniapp/components/locale/lang/zh-CN'
zhCN.calendar.start = '始'

或者使用内置 extend 工具函数进行修改：

ts

import { extend } from 'sard-uniapp'

extend(zhCN, {
  calendar: {
    start: '始',
  },
})

js

import { extend } from 'sard-uniapp'
extend(zhCN, {
  calendar: {
    start: '始',
  },
})

更多字段，可参考 zh-CN.ts。