vue2/3 写一个分页的组件

今天简单的记录下使用分页的组件使用

vue3-------------------------------------------------

父组件调用方式：

            <pagination
                    v-if="total > 0"
                    v-model:total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="handleQuery"
            />

分页子组件：

<template>
  <div class="pagination">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :background="background"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      small
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { PropType } from "vue";
import { useVModel } from '@vueuse/core'
import {scrollTo} from  "@/utils/scroll-to"
const props = defineProps({
  total: {
    required: true,
    type: Number as PropType<number>,
    default: 0,
  },
  page: {
    type: Number,
    default: 1,
  },
  limit: {
    type: Number,
    default: 20,
  },
  pageSizes: {
    type: Array as PropType<number[]>,
    default() {
      return [10, 20, 30, 50];
    },
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
  background: {
    type: Boolean,
    default: true,
  },
  autoScroll: {
    type: Boolean,
    default: true,
  },
  hidden: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["pagination", "update:page", "update:limit"]);

const currentPage = useVModel(props, "page", emit);

const pageSize = useVModel(props, "limit", emit);

function handleSizeChange(val: number) {
  emit("pagination", { page: currentPage, limit: val });
  if (props.autoScroll) {
    scrollTo(0, 800);
  }
}

function handleCurrentChange(val: number) {
  currentPage.value = val;
  emit("pagination", { page: val, limit: props.limit });
  // if (props.autoScroll) {
  //   scrollTo(0, 800);
  // }
}
</script>

<style lang="scss" scoped>
.pagination {
  padding: 12px;
  text-align: right;

  /*&.hidden {*/
  /*  display: none;*/
  /*}*/
}
</style>

vue2-------------------------------------------------

父组件调用：

<!-- 分页 -->
      <div style="text-align: right; padding: 5px 0">
        <pagination
          @pagination="handleQuery"
          :limit="queryParams.pageSize"
          :page="queryParams.pageNum"
          :total="total"
        />
      </div>

子组件：

<template>
  <div class="pagination">
    <el-pagination
      :page-size="pageSize"
      :pager-count="currentPage"
      :background="background"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      small
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: "paginationPage",
  components: {},
  props: {
    total: {
      required: true,
      type: Number,
      default: 0,
    },
    page: {
      type: Number,
      default: 1,
    },
    limit: {
      type: Number,
      default: 20,
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50];
      },
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    background: {
      type: Boolean,
      default: true,
    },
    autoScroll: {
      type: Boolean,
      default: true,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
    };
  },

  methods: {
    handleSizeChange(val) {
      this.$emit("pagination", { page: this.currentPage, limit: val });
      // if (props.autoScroll) {
      //   scrollTo(0, 800);
      // }
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit("pagination", { page: val, limit: this.limit });
      // if (props.autoScroll) {
      //   scrollTo(0, 800);
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  padding: 12px;
  text-align: right;
  /*&.hidden {*/
  /*  display: none;*/
  /*}*/
}
</style>