@ithinkdt/naive/src/components/Pagin.jsx

iThinkDT Naive UI

import { defineComponent } from 'vue'

import { NPagination } from 'ithinkdt-ui'

import { useI18n } from '@ithinkdt/core'

export const DtPagin = defineComponent({
    name: 'DtPagin',
    props: {
        total: {
            type: Number,
            default: 0,
        },
        currentPage: {
            type: Number,
            default: 0,
        },
        onCurrentChange: {
            type: Function,
            default: () => 0,
        },
        onSizeChange: {
            type: Function,
            default: () => 0,
        },
    },
    setup(props) {
        const { t } = useI18n('global')
        return () => {
            return (
                <NPagination
                    page={props.currentPage}
                    itemCount={props.total}
                    onUpdatePage={props.onCurrentChange}
                    onUpdatePageSize={props.onSizeChange}
                    pageSizes={[10, 20, 30, 50]}
                    showQuickJumper
                    showSizePicker
                    style="justify-content: flex-end"
                >
                    {{
                        prefix: () => t('page.paginPrefix', props.total ?? 0),
                        suffix: () => t('page.paginSuffix', { defaultMsg: '页' }),
                    }}
                </NPagination>
            )
        }
    },
})