## 国际化

BioUi 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：

```javascript
// 完整引入 BioUi
import Vue from 'vue'
import BioUi from '@vue2/bio-ui'
import locale from '@vue2/bio-ui/lib/locale/lang/en'

Vue.use(BioUi, { locale })
```

或

```javascript
// 按需引入 BioUi
import Vue from 'vue'
import { Button, Select } from '@vue2/bio-ui'
import lang from '@vue2/bio-ui/lib/locale/lang/en'
import locale from '@vue2/bio-ui/lib/locale'

// 设置语言
locale.use(lang)

// 引入组件
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
```

## 兼容 `vue-i18n@5.x`

BioUi 兼容 [vue-i18n@5.x](https://github.com/kazupon/vue-i18n)，搭配使用能更方便地实现多语言切换。

```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import BioUi from '@vue2/bio-ui'
import enLocale from '@vue2/bio-ui/lib/locale/lang/en'
import zhLocale from '@vue2/bio-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)
Vue.use(BioUi)

Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)
```

## 兼容其他 i18n 插件
如果不使用 `vue-i18n@5.x`，而是用其他的 i18n 插件，BioUi 将无法兼容，但是可以自定义 BioUi 的 i18n 的处理方法。

```javascript
import Vue from 'vue'
import BioUi from '@vue2/bio-ui'
import enLocale from '@vue2/bio-ui/lib/locale/lang/en'
import zhLocale from '@vue2/bio-ui/lib/locale/lang/zh-CN'

Vue.use(BioUi, {
  i18n: function (path, options) {
    // ...
  }
})
```

## 兼容 `vue-i18n@6.x`

默认不支持 6.x 的 `vue-i18n`，你需要手动处理。

```javascript
import Vue from 'vue'
import BioUi from '@vue2/bio-ui'
import VueI18n from 'vue-i18n'
import enLocale from '@vue2/bio-ui/lib/locale/lang/en'
import zhLocale from '@vue2/bio-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)

const messages = {
  en: {
    message: 'hello',
    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
  },
  zh: {
    message: '你好',
    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
  }
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

Vue.use(BioUi, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({ i18n }).$mount('#app')
```

## 按需加载里定制 i18n

```js
import Vue from 'vue'
import DatePicker from '@vue2/bio-ui/lib/date-picker'
import VueI18n from 'vue-i18n'

import enLocale from '@vue2/bio-ui/lib/locale/lang/en'
import zhLocale from '@vue2/bio-ui/lib/locale/lang/zh-CN'
import BioLocale from '@vue2/bio-ui/lib/locale'

Vue.use(VueI18n)
Vue.use(DatePicker)

const messages = {
  en: {
    message: 'hello',
    ...enLocale
  },
  zh: {
    message: '你好',
    ...zhLocale
  }
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

BioLocale.i18n((key, value) => i18n.t(key, value))
```

## 通过 CDN 的方式加载语言文件

```html
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/@vue2/bio-ui"></script>
<script src="//unpkg.com/@vue2/bio-ui/lib/umd/locale/en.js"></script>

<script>
  ELEMENT.locale(ELEMENT.lang.en)
</script>
```

搭配 `vue-i18n` 使用

```html
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="//unpkg.com/@vue2/bio-ui"></script>
<script src="//unpkg.com/@vue2/bio-ui/lib/umd/locale/zh-CN.js"></script>
<script src="//unpkg.com/@vue2/bio-ui/lib/umd/locale/en.js"></script>

<script>
  Vue.locale('en', ELEMENT.lang.en)
  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
</script>
```

目前 BioUi 内置了以下语言：
<ul class="language-list">
  <li>简体中文（zh-CN）</li>
  <li>英语（en）</li>
</ul>
