1

components/Pagination.vue

@@ -0,0 +1,65 @@
+<!--分页组件-->
+<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>