LocaleProvider 国际化

QR

扫二维码查看演示效果

为组件内建文案提供统一的国际化支持。

使用

LocaleProvider 使用 Vue 的 provider/inject 选项， 只需要在应用外围包裹一次即可全局生效

当有多个组件时，需要保证最外层有一个根节点

<LocaleProvider :locale="enUS"><component></component></LocaleProvider>
<script>
import enUS from '@/components/locale-provider/en_US'
export default {
  data () {
    return {
      enUS: enUS
    }
  }
}
</script>

其他国际化需求

本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用vue-i18n

Code Example

<template>
  <div>
    <WhiteSpace size="lg"></WhiteSpace>
    <WingBlank>
      <!-- <WhiteSpace /> -->
      <LocaleProvider :locale="currentLocale">
        <div>
          <List>
            <Picker :data="languages" :cascade="false" :onOk="changeLanguage" :value="[...locale]">
              <template slot-scope="props" slot="list-item">
                <ListItem arrow="horizontal" :onClick="props.onClick" :extra="props.extra">Choose language</ListItem>
              </template>
            </Picker>
          </List>
          <WhiteSpace size="xl" />
          <WhiteSpace size="xl" />
          <WhiteSpace />
          <List>
            <DatePicker mode="date">
              <template slot-scope="props" slot="list-item">
                <ListItem arrow="horizontal" :extra="props.extra">datePicker</ListItem>
              </template>
            </DatePicker>
            <Picker :data="seasons" :cascade="false">
              <template slot-scope="props" slot="list-item">
                <ListItem arrow="horizontal" :onClick="props.onClick" :extra="props.extra">picker</ListItem>
              </template>
            </Picker>
          </List>
          <WhiteSpace />
          <InputItem type="money" placeholder="money input" />
        </div>
      </LocaleProvider>
    </WingBlank>
  </div>
</template>
<script>
import enUS from '@/components/locale-provider/en_US'
import ruRU from '@/components/locale-provider/ru_RU'
import DatePicker from '@/components/date-picker'
import Picker from '@/components/picker'
import Button from '@/components/button'
import List from '@/components/list'
import ListItem from '@/components/list-item'
import LocaleProvider from '@/components/locale-provider'
import WingBlank from '@/components/wing-blank'
import WhiteSpace from '@/components/white-space'
import Pagination from '@/components/pagination'
import InputItem from '@/components/input-item'
export default {
  components: {
    WingBlank,
    WhiteSpace,
    Pagination,
    LocaleProvider,
    Button,
    DatePicker,
    Picker,
    List,
    ListItem,
    InputItem
  },
  data () {
    return {
      showPicker: false,
      locale: 'English',
      languages: [
        {
          value: '中国',
          label: '中国',
          language: undefined
        },
        {
          value: 'English',
          label: 'English',
          language: enUS
        },
        {
          value: 'Русский',
          label: 'Русский',
          language: ruRU
        }
      ],
      seasons: [
        [
          {
            label: '2013',
            value: '2013'
          },
          {
            label: '2014',
            value: '2014'
          }
        ],
        [
          {
            label: '春',
            value: '春'
          },
          {
            label: '夏',
            value: '夏'
          }
        ]
      ]
    }
  },
  computed: {
    currentLocale () {
      return this.languages.find(item => item.value === this.locale).language
    }
  },
  methods: {
    changeLanguage (value) {
      this.locale = value[0]
    }
  }
}
</script>

props

参数	说明	类型	默认值
locale	语言包配置，可到 @/components/locale-provider/ 目录下找	Obejct	-

https://ladybirddev.github.io/ui-nuclear-mobile-demo/#/locale-provider