element提供了完整引入和按需引入的方案,并且使用dayjs国际化
完整引入 + 普通国际化
- 新建 elementPlus.ts文件,并在main.ts中引入
// elementPlus.ts
import { App } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const install = (app: App) => {
app.use(ElementPlus)
}
export default install
import { createApp } from 'vue'
import App from './App.vue'
import elementPlus from '@/vab/elementPlus'
const app = createApp(App)
app.use(elementPlus)
app.mount('#app')
- 在App.vue中使用el-config-provider控制国际化
<template>
<el-config-provider :locale="localLanguage">
<hello-world @change="changeLanguage" />
</el-config-provider>
</template>
<script lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
import { computed, defineComponent, ref } from 'vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en'
type localType = 'zhCn' | 'en'
export default defineComponent({
components: {
HelloWorld
},
setup () {
const local = ref<localType>('zhCn')
const localLanguage = computed(() => {
switch (local.value) {
case 'en':
return en
case 'zhCn':
return zhCn
}
})
return {
local,
localLanguage
}
},
methods: {
/**
* 切换语言
* @param type
*/
changeLanguage (type: localType): void {
this.local = type
}
}
})
</script>
- 在HelloWord组件中切换语言
<template>
<el-button>按钮</el-button>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
>
</el-date-picker>
<el-dropdown @command="changeLanguage">
<el-button type="primary">
切换语言<i class="el-icon-arrow-down el-icon--right" />
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="zhCn">
中文
</el-dropdown-item>
<el-dropdown-item command="en">
英文
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
type localType = 'zhCn' | 'en'
export default defineComponent({
setup () {
return {
value1: ''
}
},
methods: {
/**
* 切换语言
* @param type
*/
changeLanguage (type: localType): void {
this.$emit('change', type)
}
}
})
</script>
按需引入 + 普通国际化
- 安装 vite-plugin-components sass
"devDependencies": {
"vite-plugin-components": "^0.13.2",
"sass": "^1.37.2"
}
- 配置按需引入
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 组件自动导入
ViteComponents({
customComponentResolvers: [
// 自动导入饿了么组件
ElementPlusResolver({
// 是否导入样式
importStyle: true
})
]
})
],
resolve: {
alias: {
'@': resolve('src'),
'*': resolve('')
}
}
})
- App.vue及HelloWord.vue同上
引入i18n
本来我是按照官方文档,直接配置element和i18n同步更改,但是发现element组件中的i18n不生效,我找不出哪里出了问题,所以先使用了替代方案,使用el-config-provider来控制组件的国际化,使用i18n控制自定义的消息,当用户更改语言时,分别去更改el-config-provider的local和i18n的local属性
- 创建i18n.ts文件
// i18n.ts
import { App } from 'vue'
import { createI18n } from 'vue-i18n'
const install = (app: App) => {
const messages = {
en: {
// 定义你自己的字典,但是请不要和 `el` 重复,这样会导致 ElementPlus 内部组件的翻译失效.
message: {
hello: 'hello world'
}
},
zhCn: {
// 定义你自己的字典,但是请不要和 `el` 重复,这样会导致 ElementPlus 内部组件的翻译失效.
message: {
hello: '你好,世界'
}
}
}
const i18n = createI18n({
locale: 'zhCn',
fallbackLocale: 'en',
// @ts-ignore
messages
})
app.use(i18n)
}
export default install
- 在main.js中引入
- element按需引入或者整体引入同上,只需在切换语言的方法新增一步
/**
* 切换语言
* @param type
*/
changeLanguage (type: localType): void {
this.local = type
this.$i18n.locale = type
}
总结
当前vue3的生态变化还是比较快的,多数还是beta版本,所以大家在遇到问题时还是要多做尝试