colexiu-project/src/components/pagination/index.tsx

import { scrollAnimation } from '@/util/scroll'
import { ElPagination } from 'element-plus'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default: [5, 10, 20, 30, 50]
    },
    // , jumper
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next'
    },
    showMuitiple: {
      type: Number,
      default: 10
    },
    hideOnSinglePage: {
      type: Boolean,
      default: true
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    },
    sync: {
      type: Boolean,
      default: false
    },
    saveKey: {
      type: String,
      default: ''
    },
    pagination: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    handleSizeChange(val: number) {
      this.$emit('update:page', 1)
      this.$emit('update:limit', val)
      this.pagination()
      if (this.autoScroll) {
        const currentY =
          document.documentElement.scrollTop || document.body.scrollTop
        scrollAnimation(currentY, 0)
      }
    },
    handleCurrentChange(val: number) {
      this.$emit('update:page', val)
      this.$emit('update:limit', this.limit)
      this.pagination()
      if (this.autoScroll) {
        const currentY =
          document.documentElement.scrollTop || document.body.scrollTop
        scrollAnimation(currentY, 0)
      }
    }
  },
  render() {
    return (
      <div
        class={[styles['pagination-container'], this.hidden && styles.hidden]}
      >
        <ElPagination
          currentPage={this.page}
          pageSize={this.limit}
          // @ts-ignore
          onUpdate:currentPage={(val: number) => {}}
          onUpdate:pageSize={(val: number) => {
            this.handleSizeChange(val)
          }}
          pageSizes={this.pageSizes as number[]}
          total={this.total}
          hideOnSinglePage={
            this.total > this.showMuitiple ? false : this.hideOnSinglePage
          }
          background={this.background}
          layout={this.layout}
          onSise-change={this.handleSizeChange}
          onCurrent-change={this.handleCurrentChange}
        />
      </div>
    )
  }
})