From 5cbc3742084713ca02ae6797747032d0e7f198c4 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 16 Nov 2017 01:06:41 -0600 Subject: [PATCH] [Doc] add Internationalization document (#321) * fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [bugfix] Search box-sizing wrong * [Doc] update vant-demo respo * [Doc] translate theme & demo pages * [Doc] add Internationalization document --- docs/markdown/en-US/i18n.md | 39 ++++++++++++++++++++++++++++++++++++ docs/markdown/index.js | 2 ++ docs/markdown/zh-CN/i18n.md | 40 +++++++++++++++++++++++++++++++++++++ docs/src/doc.config.js | 10 ++++++++++ 4 files changed, 91 insertions(+) create mode 100644 docs/markdown/en-US/i18n.md create mode 100644 docs/markdown/zh-CN/i18n.md diff --git a/docs/markdown/en-US/i18n.md b/docs/markdown/en-US/i18n.md new file mode 100644 index 000000000..86203d925 --- /dev/null +++ b/docs/markdown/en-US/i18n.md @@ -0,0 +1,39 @@ +# Internationalization +The default language of Vant is Chinese. If you want to use other languages, you can follow the instructions below. + +### Switch languages +Vant supports multiple languages with the Locale component, and the `Locale.use` method allows you to switch to diffrent languages. + +```js +import { Locale } from 'vant'; +import enUS from 'vant/lib/locale/lang/en-US'; + +Locale.use('en-US', enUS); +``` + +### Modify default configs +Use `Locale.add` method to modify the default configs. + +```js +import { Locale } from 'vant'; + +const messages = { + 'en-US': { + vanPicker: { + confirm: 'Close' + } + } +}; + +Locale.add(messages); +``` + +### Config files +Current supported languages: + +| Language | Filename | +|-----------|-----------| +| Chinese | zh-CN | +| English | en-US | + +View all language configs [Here](https://github.com/youzan/vant/tree/dev/packages/locale/lang). diff --git a/docs/markdown/index.js b/docs/markdown/index.js index b9883fd12..fac20167a 100644 --- a/docs/markdown/index.js +++ b/docs/markdown/index.js @@ -32,6 +32,7 @@ export default { 'zh-CN/dialog': wrapper(r => require.ensure([], () => r(require('./zh-CN/dialog.md')), 'zh-CN/dialog')), 'zh-CN/field': wrapper(r => require.ensure([], () => r(require('./zh-CN/field.md')), 'zh-CN/field')), 'zh-CN/goods-action': wrapper(r => require.ensure([], () => r(require('./zh-CN/goods-action.md')), 'zh-CN/goods-action')), + 'zh-CN/i18n': wrapper(r => require.ensure([], () => r(require('./zh-CN/i18n.md')), 'zh-CN/i18n')), 'zh-CN/icon': wrapper(r => require.ensure([], () => r(require('./zh-CN/icon.md')), 'zh-CN/icon')), 'zh-CN/image-preview': wrapper(r => require.ensure([], () => r(require('./zh-CN/image-preview.md')), 'zh-CN/image-preview')), 'zh-CN/layout': wrapper(r => require.ensure([], () => r(require('./zh-CN/layout.md')), 'zh-CN/layout')), @@ -81,6 +82,7 @@ export default { 'en-US/dialog': wrapper(r => require.ensure([], () => r(require('./en-US/dialog.md')), 'en-US/dialog')), 'en-US/field': wrapper(r => require.ensure([], () => r(require('./en-US/field.md')), 'en-US/field')), 'en-US/goods-action': wrapper(r => require.ensure([], () => r(require('./en-US/goods-action.md')), 'en-US/goods-action')), + 'en-US/i18n': wrapper(r => require.ensure([], () => r(require('./en-US/i18n.md')), 'en-US/i18n')), 'en-US/icon': wrapper(r => require.ensure([], () => r(require('./en-US/icon.md')), 'en-US/icon')), 'en-US/image-preview': wrapper(r => require.ensure([], () => r(require('./en-US/image-preview.md')), 'en-US/image-preview')), 'en-US/layout': wrapper(r => require.ensure([], () => r(require('./en-US/layout.md')), 'en-US/layout')), diff --git a/docs/markdown/zh-CN/i18n.md b/docs/markdown/zh-CN/i18n.md new file mode 100644 index 000000000..abca22380 --- /dev/null +++ b/docs/markdown/zh-CN/i18n.md @@ -0,0 +1,40 @@ +# 国际化 +Vant 默认采用中文作为语言，如果需要使用其他语言，可以参考下面的方案 + +### 多语言切换 +Vant 通过 Locale 组件实现多语言支持，使用 `Locale.use` 方法可以切换当前使用的语言。 + +```js +import { Locale } from 'vant'; +import enUS from 'vant/lib/locale/lang/en-US'; + +Locale.use('en-US', enUS); +``` + +### 修改默认文案 +通过 `Locale.add` 方法可以实现文案的修改和扩展，示例如下： + +```js +import { Locale } from 'vant'; + +const messages = { + 'zh-CN': { + vanPicker: { + confirm: '关闭' // 将'确认'修改为'关闭' + } + } +}; + +Locale.add(messages); +``` + +### 配置文件 + +目前支持的语言: + +| 语言 | 文件名 | +|-----------|-----------| +| 简体中文 | zh-CN | +| 英语 | en-US | + +在 [这里](https://github.com/youzan/vant/tree/dev/packages/locale/lang) 查看所有的 i18n 配置文件。 diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index b68b39fa3..8eb9b6623 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -49,6 +49,11 @@ module.exports = { title: '示例页面', noDocument: true, noExample: true + }, + { + path: '/i18n', + title: '国际化', + noExample: true } ] } @@ -316,6 +321,11 @@ module.exports = { title: 'Demo pages', noDocument: true, noExample: true + }, + { + path: '/i18n', + title: 'Internationalization', + noExample: true } ] }