66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<!--分页组件-->
|
|
<script setup lang="ts">
|
|
import type { ComponentSize } from 'element-plus'
|
|
import type {CmsArticleParam} from "~/api/cms/cmsArticle/model";
|
|
import {useIsMobile} from "~/composables/configState";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
data?: any;
|
|
total?: number;
|
|
size?: ComponentSize;
|
|
pageSize?: number;
|
|
}>(),
|
|
{}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'done', params: CmsArticleParam): void;
|
|
(e: 'update:visible', visible: boolean): void;
|
|
}>();
|
|
|
|
const i18n = useI18n();
|
|
// const size = ref<ComponentSize>('default');
|
|
const disabled = ref<boolean>(false);
|
|
const background = ref(true);
|
|
const mobile = useIsMobile();
|
|
|
|
// 搜索表单
|
|
const where = reactive<CmsArticleParam>({
|
|
keywords: '',
|
|
page: 1,
|
|
limit: props.pageSize || 10,
|
|
status: 0,
|
|
parentId: undefined,
|
|
categoryId: undefined,
|
|
lang: i18n.locale.value
|
|
});
|
|
|
|
// 加载数据
|
|
const reload = async () => {
|
|
emit('done',where);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="pagination flex py-5 items-center" :class="mobile ? 'justify-center' : 'justify-between'">
|
|
<span class="text-sm pl-2" v-if="!mobile">
|
|
{{ $t('pagination.total') }} {{ total }} {{ $t('pagination.unit') }} {{ $t('pagination.perPage') }}{{ where.limit }}{{ $t('pagination.unit') }} {{ where.page }}/{{ Math.ceil(Number(total) / Number(where.limit)) }}
|
|
</span>
|
|
<el-pagination
|
|
v-model:current-page="where.page"
|
|
v-model:page-size="where.limit"
|
|
:size="size"
|
|
:disabled="disabled"
|
|
:background="background"
|
|
layout="prev, pager, next"
|
|
:total="total"
|
|
@currentChange="reload"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|