目标效果
先看下 element-plus 官网的效果
想要的目标效果如下:
实现
废话不多说,先上代码
jsx
//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 来实现语言配置。 完整代码如下:
jsx
<template>
<el-config-provider :locale="zhCn">
<el-pagination
class="h-46 mr-50 flex justify-end"
v-if="pagination.isShow && pagination.total > 0"
v-model="pagination.current"
:layout="pagination.layout"
:pager-count="5"
:page-sizes="pagination.pageSizes"
:total="pagination.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-config-provider>
<template/>
<script setup>
// 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 = '页';
<script/>
如果修改配置报错,可能时引入zhcn路径不正确,建议检查下elementplus版本,检查文件路径。
如果你想对所有使用的组件都转换中文,可以直接使用
<el-config-provider :locale="zhCn"></el-config-provider>
包裹路由来实现。