<template>
<div
class="pagination flex-center"
:style="{
margin: props.margin
}">
<el-pagination
class="pagination-control"
background
layout="prev, pager, next, jumper"
:current-page="props.current"
:page-size="props.size"
:total="props.total"
@current-change="onChange" />
</div>
</template>
js代码
<script setup>
import {
defineProps,
defineEmits
} from 'vue';
let props = defineProps({
margin: {
type: String,
default: ()=> '60px 0 0'
},
// 在第几页
current: {
type: Number,
default: 1
},
// 一页显示多少条
size: {
type: Number,
default: 9
},
// 总数据量
total: {
type: Number,
default: 0
}
});
let emits = defineEmits([
'onChange'
]);
const onChange = page=> {
console.log(`第${ page }页`)
emits('onChange',page);
}
</script>
css
<style scoped>
.pagination-control /deep/ .btn-prev,
.pagination-control /deep/ .number,
.pagination-control /deep/ .btn-next,
.pagination-control /deep/ .el-pagination__editor {
min-width: 44px!important;
width: 44px!important;
height: 44px!important;
border-radius: 12px!important;
background-color: #fff!important;
font-size: 16px!important;
color: #969696!important;
overflow: hidden;
}
.pagination-control /deep/ .number.is-active {
background-color: #12BCFF!important;
font-weight: normal!important;
color: #fff!important;
}
.pagination-control /deep/ .el-input__wrapper {
box-shadow: none!important;
}
</style>
效果展示