vue3 + element-plus组件的国际化

1、首先官网是这样说明的：

vue版本：3.2.26
element-plus版本：1.2.0-beta.6

然后我在main.js中也这样写了

于是乎在项目没生效

我只能说官方的文档能不能细心点～～·

2、使用ElConfigProvider全局配置组件

在app.vue中使用组件

<template><el-config-provider :locale="locale"><router-view /></el-config-provider></template><script>
import {ref, watch, computed} from 'vue'
import {useStore} from 'vuex'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import enLocale from 'element-plus/lib/locale/lang/en'
import {observeSwitchLang} from './utils/i18n'
import {GET_USER_INFO, WINDOW_WIDTH, HANDLE_COLLAPSE} from './utils/constant'
import {generateNewStyles, appendStyles} from './utils/theme'
import useWindowSize from './hooks/useWindowSize'export default {setup() {const locale = ref(zhLocale)const store = useStore()const {width} = useWindowSize()const lang = computed(() => store.getters.language)/* 处理刷新后主题色重置的问题 */generateNewStyles(store.getters.themeColor).then(newStyle => appendStyles(newStyle))watch(width, newWidth => {if (newWidth <= WINDOW_WIDTH) {store.commit(HANDLE_COLLAPSE, false)} else {store.commit(HANDLE_COLLAPSE, true)}})watch(lang, newLang => {locale.value = newLang === 'zh' ? zhLocale : enLocale})observeSwitchLang(() => {store.getters.token && store.dispatch(GET_USER_INFO)})return {locale}}
}
</script>

这下子就可以了

vue3 + element-plus组件的国际化相关推荐

Vue3 - Element plus 实现 “带分页“ 表格组件，实现跨页进行 “分页勾选“ 的多选功能（解决分页表格组件＜el-table＞跨页后已前勾选的行自动消失问题）详细示例解决教程
前言在 Vue3 项目中,使用 Element Plus 组件库的表格组件时,出现了跨页勾选复选框消失的问题. 本文实现了 vue3 中 element plus 表格组件 <el-table ...
Vue3.0使用Element Plus组件报错[Vue warn]: Failed to resolve component: `el-XXXX` If this is a native custo
文章目录报错截图一.问题描述二.报错信息格式三.报错原因报错截图一.问题描述我的技术栈:Vue3+TypeScript+Vite+Element Plus 我的报错:Vue3 项目使用 ...
使用Vue3+Element Plus开发Chrome插件
使用Vue3+Element Plus开发Chrome插件引言初始Vue项目的创建 Element-Plus组件的安装及导入其他文件配置 .eslintrc.js文件 vue.config.js ...
Vue3 Element Plus 动态图标
Vue3 Element Plus 动态图标 Element Plus 中的图标以组件的形式来使用,而在基于Vue 2.x的Element UI中图标是字符串的形式,这样就导致过去的一些使用习惯不得不 ...
element table 组件内容换行方案
element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> ...
vue3 内置组件keep-alive用法的全面介绍
vue3 内置组件keep-alive用法的全面介绍基础用法首先看一个反面例子 const app = Vue.createApp({template: `<button v-for=&qu ...
补充记录vue3中rrweb-player组件实现网页录屏的一个BUG解决
项目场景: vue3中rrweb-player组件实现网页录屏功能问题描述提示:这里描述项目中遇到的问题: 录制的视频会重复记录录制中这个按钮的状态,每打开一次开始录制视频中就会多一个按钮,bug ...
vue3内置组件（Teleport组件，Fragment组件）-传送组件，减少层级
一.传送组件(Teleport组件) 可将组件移动到 DOM 中 Vue app 之外的其他位置,主要是为了解决一些特殊场景下模态对话框组件.组件的渲染. 例子:模拟UI框架对话框组件. App.vu ...
Element UI 组件库分析和二次开发（一）
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...
element plus组件居中显示
element plus组件内容居中显示今天用Element UI做一个分页,发现所有组件都无法实现居中显示,百度了大部分都是text-align:center,但我试了都不管用,自己研究了半天终于 ...

vue3 + element-plus组件的国际化

1、首先官网是这样说明的：

2、使用ElConfigProvider全局配置组件

vue3 + element-plus组件的国际化相关推荐

最新文章

热门文章