el

您所在的位置:网站首页 elsa翻译中文 el

el

2024-04-17 06:18| 来源: 网络整理| 查看: 265

目标效果

先看下 element-plus 官网的效果

image.png

想要的目标效果如下:

image.png 实现

废话不多说,先上代码

//main.ts import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import zhCn from 'element-plus/es/locale/lang/zh-cn'; // 修改分页器默认文字 zhCn.el.pagination.total = '共 `{total} 条`'; zhCn.el.pagination.goto = '跳至'; zhCn.el.pagination.pagesize = '条/页'; zhCn.el.pagination.pageClassifier = '页'; const app = createApp(App); app.use(ElementPlus, { locale: zhCn }).mount('#app');

一般情况直接在main.ts 配置完就可以了,但是我的项目使用的 unplugin-vue-components 和 unplugin-auto-import 按需自动导入组件,有什么方法可以不用全局引入 ElementPlus 直接修改吗,当然!

element 官网提供了一个组件 Config Provider,我们可以通过 ElConfigProvider 来实现语言配置。 完整代码如下:

// ElConfigProvider 组件 import { ElConfigProvider } from 'element-plus'; // 引入中文包 import zhCn from 'element-plus/es/locale/lang/zh-cn'; // 更改分页文字 // zhCn.el.pagination.total = '共 `{total} 条`'; // zhCn.el.pagination.goto = '跳至'; // zhCn.el.pagination.pagesize = '条/页'; // zhCn.el.pagination.pageClassifier = '页';

如果修改配置报错,可能时引入zhcn路径不正确,建议检查下elementplus版本,检查文件路径。

如果你想对所有使用的组件都转换中文,可以直接使用 包裹路由来实现。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3