国际化

Vue EP Toolkit 组件内部默认使用英语，同时支持多语言切换。

全局配置

Vue EP Toolkit 提供了两种配置国际化的方式。

完整引入

如果你使用完整引入，需要在注册插件时传入 locale 配置：

import { createApp } from "vue"
import VueEpToolkit, { zhCn } from "vue-ep-toolkit"
import "vue-ep-toolkit/dist/index.css"
import App from "./App.vue"

const app = createApp(App)
app.use(VueEpToolkit, {
  locale: zhCn
})
app.mount("#app")

按需引入

如果你使用按需引入，需要使用 ElConfigProvider 组件来配置国际化：

<template>
  <el-config-provider :locale="locale">
    <app />
  </el-config-provider>
</template>

<script setup>
import { ElConfigProvider } from "element-plus"
import { zhCn } from "vue-ep-toolkit"

const locale = zhCn
</script>

支持的语言

Vue EP Toolkit 内置了以下语言包：

语言	文件名
英语	en
简体中文	zh-cn

使用其他语言

如果你需要使用其他语言，可以参考现有语言包的格式自定义语言包。

语言包格式

import zhCn from "element-plus/es/locale/lang/zh-cn"

export default {
  ...zhCn, // 继承 Element Plus 的语言包
  ep: {
    table: {
      refresh: "刷新",
      export: "导出",
      search: "搜索",
      column: "列"
    }
  }
}

使用自定义语言包

import { createApp } from "vue"
import VueEpToolkit from "vue-ep-toolkit"
import customLocale from "./locale/custom"
import App from "./App.vue"

const app = createApp(App)
app.use(VueEpToolkit, {
  locale: customLocale
})
app.mount("#app")

动态切换语言

你可以通过 useLocale 组合式函数来动态切换语言：

<template>
  <el-button @click="toggleLocale">切换语言</el-button>
</template>

<script setup>
import { ref } from "vue"
import { useLocale, en, zhCn } from "vue-ep-toolkit"

const locale = useLocale()
const currentLang = ref("zh-cn")

const toggleLocale = () => {
  if (currentLang.value === "zh-cn") {
    locale.value = en
    currentLang.value = "en"
  } else {
    locale.value = zhCn
    currentLang.value = "zh-cn"
  }
}
</script>