import ja from '
element-plus/es/locale/lang/ja'
<template>
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:background="background"
:layout="layout"
:page-sizes="pageSizes"
:pager-count="pagerCount"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script setup name="Pagination" lang="ts">
import { scrollTo } from '@/utils/scroll-to';
import {
propTypes } from '@/utils/
propTypes';
const props = defineProps({
total:
propTypes.number,
page:
propTypes.number
.def(1),
limit:
propTypes.number
.def(20),
pageSizes: { type: Array<number>, default: () => [10, 20, 30, 50] },
// 移动端页码按钮的数量端默认值5
pagerCount:
propTypes.number
.def(document
.body
.clientWidth < 992 ? 5 : 7),
layout:
propTypes.string
.def('total, sizes, prev, pager, next, jumper'),
background:
propTypes.bool
.def(true),
autoScroll:
propTypes.bool
.def(true),
hidden:
propTypes.bool
.def(false),
float:
propTypes.string
.def('right')
});
const emit = defineEmits(['update:page', 'update:limit', 'pagination']);
const currentPage = computed({
get() {
return props
.page;
},
set(val) {
emit('update:page', val);
}
});
const pageSize = computed({
get() {
return props
.limit;
},
set(val) {
emit('update:limit', val);
}
});
function handleSizeChange(val: number) {
if (currentPage
.value * val > props
.total) {
currentPage
.value = 1;
}
emit('pagination', { page: currentPage
.value, limit: val });
if (props
.autoScroll) {
scrollTo(0, 800);
}
}
function handleCurrentChange(val: number) {
emit('pagination', { page: val, limit: pageSize
.value });
if (props
.autoScroll) {
scrollTo(0, 800);
}
}
</script>
<style lang="scss" scoped>
.pagination-container {
.el-pagination {
float: v-bind(float);
}
}
.pagination-container
.hidden {
display: none;
}
</style>
它是这样的，我想把显示的文字转为日文（里面直接用的封装好的中文，我没办法直接改
本文介绍如何在React中使用propTypes属性进行组件Props类型的检查，确保组件接收正确的参数类型。通过实例展示如何限制组件只能接收单个子元素。
扫一扫
996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
