[Element-plus]动态设置组件的语言

nuxt element-plus国际化

vue element-plus国际化

<template>
  <div class="container">
<!--    <LangSwitcher />-->
    <button @click="toggle('zh-cn')">中文</button>
    <button @click="toggle('en')">English</button>
    <button @click="toggle('ja')">日本语</button>
    <div>
      <br />
      <el-config-provider :locale="locale">
        <el-table :data="[]" />
        <el-pagination :total="100" />
      </el-config-provider>
    </div>
  </div>
</template>

<script setup lang="ts">
import LangSwitcher from './lang.vue'
const dialogVisible = ref(false)
const openDialog = () => {
  dialogVisible.value = true
}
import { ref, computed } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import ja from 'element-plus/dist/locale/ja.mjs'

const language = ref(zhCn)
const locale = computed(() => {
  switch(language.value) {
    case 'zh-cn':
      return zhCn
    case 'en':
      return en
    case 'ja':
      return ja
    default:
      return zhCn
  }
})

//设置多语言的方法
const toggle = (event: string) => {
  // language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
  language.value = event
}
</script>