[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 zhCncase 'en':return encase 'ja':return jadefault:return zhCn}
})//设置多语言的方法
const toggle = (event: string) => {// language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'language.value = event
}
</script>