解决element-plus部分组件为英文的问题

640 阅读1分钟

解决方案博客链接:www.jianshu.com/p/9059539d4…

main.js

这个是element-plus官方正在解决的bug

1、第一行结构ref

2、第九到三十五行是需要自己注入国际化代码(没看懂,网上搜的)

3、第三十八行调用。

import { createApp,ref } from 'vue'
import ElementPlus from 'element-plus';
import router from './router'
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue'
import storage from './utils/storage';
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'

ElementPlus.useLang = (app, ref, locale) => {
  const template = (str, option) => {
    if (!str || !option) return str
    return str.replace(/{(\w+)}/g, (_, key) => {
      return option[key]
    })
  }

  // 注入全局属性,子组件都能通过inject获取
  app.provide('ElLocaleInjection', {
    lang: ref(locale.name),
    locale: ref(locale),
    t: (...args) => {
      const [path, option] = args
      let value
      const array = path.split('.')
      let current = locale
      for (let i = 0, j = array.length; i < j; i++) {
        const property = array[i]
        value = current[property]
        if (i === j - 1) return template(value, option)
        if (!value) return ''
        current = value
      }
    },
  })
}

const app = createApp(App)
ElementPlus.useLang(app, ref, zhLocale)
//全局注册
app.config.globalProperties.$storage = storage

console.log("环境变量=>",import.meta.env);
app.use(ElementPlus).use(router).mount('#app')