vue3 el-pagination 将 英文 修改 为 中文

场景：修改Element Plus组件库的分页组件的样式 由于我修改的并不是样式 而是要修改文字 尝试了使用插槽 但是只能添加文字 但是原有的文字并不能去除 最后发现样式都是一样的 只是中英文不一样 所以我只要把现在的英文转化为中文文字就好了
组件库原有样式：
要实现的效果：

首先引入
//引入中文包 把分页组件文字转化为中文

import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

然后 使用 ElConfigProvider 组件绑定 locale 语言环境 将 内容写在 ElConfigProvider 里 包裹起来就可以了

<el-config-provider :locale="zhCn">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[100, 200, 300, 400]"
        :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="400"
        @size-change="handleSizeChange" @current-change="handleCurrentChange">
        <template #total="{ total }">
          总共<span>{{ total }}</span>条
        </template>
      </el-pagination>
    </el-config-provider>

这个时候样式已经转化为中文了 但import zhCn from 'element-plus/dist/locale/zh-cn.mjs’这行代码飘红了 ，说是找不到位置， 于是我在src下面新建了一个文件夹用来导出中文包 解决飘红问题

element-plus.d.ts 文件内容

declare module 'element-plus/dist/locale/zh-cn.mjs' {
  const zhCn: {
    name: string
    el: Record<string, any>
  }
  export default zhCn
}

pagination组件

<template>
    <div class="pagination">
        <el-config-provider :locale="zhCn">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="props.pageSizes"
                :total="props.total" :background="true" layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </el-config-provider>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
//引入中文包 把分页组件文字转化为中文
import { ElConfigProvider } from 'element-plus';
const props = defineProps({
    currentPage: {
        type: Number,
        required: true
    },
    pageSize: {
        type: Number,
        required: true
    },
    total: {
        type: Number,
        required: true
    },
    pageSizes: {
        type: Array as PropType<number[]>,
        default: () => [5, 10, 20]
    }
});

const emit = defineEmits(['update:currentPage', 'update:pageSize', 'size-change', 'current-change']);

// 使用 computed 确保响应式绑定
const currentPage = computed({
    get: () => props.currentPage,
    set: (value: number) => emit('update:currentPage', value)
});

const pageSize = computed({
    get: () => props.pageSize,
    set: (value: number) => emit('update:pageSize', value)
});

const handleSizeChange = (size: number) => {
    emit('update:pageSize', size);
    emit('size-change', size);
};

const handleCurrentChange = (page: number) => {
    emit('update:currentPage', page);
    emit('current-change', page);
};
</script>

<style scoped lang="scss">
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    bottom: 10px;
    right: 30px;
    z-index: 999;
}
</style>