update Pagination/index.vue

This commit is contained in:
不做码农 2023-07-13 12:59:17 +08:00
parent b8713729d3
commit b45d893a60

View File

@ -23,43 +23,43 @@ export default {
props: { props: {
total: { total: {
required: true, required: true,
type: Number, type: Number
}, },
page: { page: {
type: Number, type: Number,
default: 1, default: 1
}, },
limit: { limit: {
type: Number, type: Number,
default: 20, default: 20
}, },
pageSizes: { pageSizes: {
type: Array, type: Array,
default() { default() {
return [10, 20, 30, 50, 100] return [10, 20, 30, 50, 100]
}, }
}, },
// 5 // 5
pagerCount: { pagerCount: {
type: Number, type: Number,
default: document.body.clientWidth < 992 ? 5 : 7, default: document.body.clientWidth < 992 ? 5 : 7
}, },
layout: { layout: {
type: String, type: String,
default: 'total, sizes, prev, pager, next, jumper', default: 'total, sizes, prev, pager, next, jumper'
}, },
background: { background: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
autoScroll: { autoScroll: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
hidden: { hidden: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}, },
setup(props, { ctx, emit }) { setup(props, { ctx, emit }) {
const currentPage = computed({ const currentPage = computed({
@ -68,7 +68,7 @@ export default {
}, },
set(val) { set(val) {
emit('update:page', val) emit('update:page', val)
}, }
}) })
const pageSize = computed({ const pageSize = computed({
get() { get() {
@ -76,7 +76,7 @@ export default {
}, },
set(val) { set(val) {
emit('update:limit', val) emit('update:limit', val)
}, }
}) })
function handleSizeChange(val) { function handleSizeChange(val) {
@ -96,15 +96,16 @@ export default {
currentPage, currentPage,
pageSize, pageSize,
handleSizeChange, handleSizeChange,
handleCurrentChange, handleCurrentChange
} }
}, }
} }
</script> </script>
<style scoped> <style scoped>
.pagination-container { .pagination-container {
/* background: #fff; */ /* background: #fff; */
padding: 32px 16px; padding: 20px 16px;
float: right;
} }
.pagination-container.hidden { .pagination-container.hidden {
display: none; display: none;