formilyjs/element-plus 设置中文无效的原因

工作中用到了这个库，但是使用国际化设置中文却不行，所以查看源码 发现了不行的原因

直接说结论，不浪费大家时间，不是使用方法有问题，就是这个库自身的bug，想要设置中文，要么改源码
要么直接使用原生element

原理分析

先看看element是如何设置成中文的

这是官网的写法，那么看看这个组件内部是如何设置的

  provideFn(
    localeContextKey,
    computed(() => context.value.locale)
  )

export const localeContextKey: InjectionKey<Ref<Language | undefined>> =
  Symbol('localeContextKey')

原理很简单 其实就是利用vue的provide和inject来实现的，每个组件都会通过inject来获取你当前的语言，
在el-config-provider组件里则provide出去设置的语言。注意这个localeContextKey是个symbol类型。
这也是导致formilyjs/element-plus不能设置中文的原因

formilyjs/element-plus的问题在哪里

它其实就是对element做了一层简单的封装，举个TimePicker的简单的例子

import type { TimePicker as ElTimePickerProps } from 'element-ui'
import { TimePicker as ElTimePicker } from 'element-ui'

export type TimePickerProps = ElTimePickerProps

const TransformElTimePicker = transformComponent<TimePickerProps>(
  ElTimePicker,
  {
    change: 'input',
  }
)

export const TimePicker = connect(
  TransformElTimePicker,
  mapProps({ readOnly: 'readonly' }),
  mapReadPretty(PreviewText.TimePicker)
)

export default TimePicker

可以看出就是对TimePicker做了一层封装，那是什么导致设置中文失效呢

因为localeContextKey是个symbol类型，你使用原生element的localeContextKey设置的中文，也只能在原生
的组件中生效，要使得formily中的组件生效，则必须提供对应封装时使用的element的localeContextKey出来给开发者使用