ShutongInterconnectedChemicalCloudPlatform/src/components/Pagination/index.vue

<template>
  <div :class="'pagination ' + { hidden: hidden }">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pagesize"
      :background="background"
      :layout="layout"
      :page-sizes="pagesizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, PropType } from "vue";
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"]);

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">
.pagination{
  position: relative;
  .el-pagination.is-background{
    justify-content: flex-end;
    .el-pagination__total{
      position: absolute;
      left: 0;
      float: left;
      margin-left: 0!important;
    }
    .btn-prev, .btn-next, .el-pager li{
      background-color: #fff;
      border: solid 1px #d9d9d9;
      color: #666;
      font-weight: normal;
    }
    .el-pager li:not(.disabled).is-active,
    .el-pager li:not(.disabled):hover,
    .btn-prev:not(.disabled):hover,
    .btn-next:not(.disabled):hover{
      color: $menuHover;
      border-color: $menuHover;
      background-color: #fff;
    }
    .btn-prev:disabled, .btn-next:disabled{
      color: #c0c4cc;
      background-color: #fff;
      border-color: #c0c4cc;
    }
  }
}
</style>
<style lang="scss" scoped>
.pagination {
  padding: 12px;

  &.hidden {
    display: none;
  }
}

</style>