feat(MBPagination): 添加分页组件
This commit is contained in:
parent
970bc7b95c
commit
16ef440b87
51
components/MB/MBPagination.vue
Normal file
51
components/MB/MBPagination.vue
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<template>
|
||||||
|
<uni-pagination
|
||||||
|
v-model:current="currentPage"
|
||||||
|
v-model:pageSize="pageSize"
|
||||||
|
:total="total"
|
||||||
|
next-text="后一页"
|
||||||
|
prev-text="前一页"
|
||||||
|
@change="handleChange"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import UniPagination from "../../uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue";
|
||||||
|
import {computed, defineEmits, defineOptions, defineProps} from 'vue'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'MBPagination',
|
||||||
|
inheritAttrs: false
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits()
|
||||||
|
const props = defineProps(['total', 'pagination', 'page', 'limit'])
|
||||||
|
|
||||||
|
|
||||||
|
const currentPage = computed({
|
||||||
|
get() {
|
||||||
|
return props.page
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
emit('update:page', val)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const pageSize = computed({
|
||||||
|
get() {
|
||||||
|
return props.limit
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
emit('update:pageSize', val)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleChange = ({type, current}) => {
|
||||||
|
currentPage.value = current
|
||||||
|
console.log(type, current, pageSize.value)
|
||||||
|
emit('pagination', {
|
||||||
|
page: current,
|
||||||
|
limit: pageSize.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user