<template>
    <div style="width: 100%;height: 100px;">
        <pagination v-show="pageProps.total" :total="pageProps.total" v-model:page="pageProps.pageNum"
                    v-model:limit="pageProps.pageSize" @pagination="changePage"/>
    </div>

</template>

<script setup>
    import {defineExpose} from 'vue';
    import {defineEmits} from "vue";
    import { onMounted} from 'vue';
    const emit = defineEmits(['changePage'])
    const props = defineProps({
        total: 0,
        pageNum: 0,
        pageSize: 5,
    })

    const pageProps = ref({
        total: 0,
        pageNum: 0,
        pageSize: 5,
    })
    onMounted(() => {
        pageProps.value.total = props.total;
        pageProps.value.pageNum = props.pageNum;
        pageProps.value.pageSize = props.pageSize;
    })



    function changePage() {
        emit('changePage', pageProps)
    }


</script>

<style scoped>

</style>
