最简单的element-plus国际化处理

Element Plus 是 Element UI 的 Vue 3 版本。以下是一个简单的 Vue 3 应用程序示例，演示如何使用 Element Plus 进行国际化处理。

首先，确保安装了 Element Plus：

npm install element-plus --save

然后，在 Vue 应用程序中使用：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn';
 
const app = createApp(App);
 
app.use(ElementPlus, {
  locale,
  size: 'small' // 设置默认的组件大小
});
 
app.mount('#app');

在组件中使用 Element Plus 组件：

<template>
  <el-button @click="changeLanguage('en')">English</el-button>
  <el-button @click="changeLanguage('zh-cn')">中文</el-button>
  <el-config-provider :locale="locale">
    <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
  </el-config-provider>
</template>
 
<script>
import { ref } from 'vue';
import { ElConfigProvider } from 'element-plus';
import { DatePicker } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';
 
export default {
  components: {
    ElConfigProvider,
    'el-date-picker': DatePicker
  },
  setup() {
    const date = ref(null);
    const locale = ref(zhCn);
 
    const changeLanguage = (lang) => {
      switch (lang) {
        case 'en':
          locale.value = en;
          break;
        case 'zh-cn':
          locale.value = zhCn;
          break;
        default:
          locale.value = zhCn;
      }
    };
 
    return { date, locale, changeLanguage };
  }
};
</script>

在这个例子中，我们使用了 el-config-provider 组件来设置 Element Plus 的国际化配置。通过点击按钮切换语言，动态更新配置以实现国际化的效果。