cip-components/cip-pagination/index.vue

<template>
  <el-pagination
    class="cip-pagination"
    :class="{'cip-pagination__compact':compact}"
    :background="background"
    @size-change="handleSizeChange"
    @current-change="handlePageChange"
    :layout="layout"
    :total="total"
    :current-page="currentPage"
    :page-sizes="usingPageSizes"
    :page-size="limit"
    :hide-on-single-page="hideOnSinglePage"
  />
</template>
<script>
import { defineComponent, computed } from 'vue'
import { ElPagination } from 'element-plus'
import { useCipConfig } from '../hooks/use-cip-config'
import { getUsingConfig } from '@cip/utils/util'
export default defineComponent({
  name: 'CipPagination',
  components: { ElPagination },
  props: {
    currentPage: { type: Number, default: 1 },
    total: { type: Number, default: 0 },
    limit: { type: Number, default: 10 },
    offset: { type: Number, default: 0 },
    hideOnSinglePage: { type: Boolean },
    layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' },
    background: { type: Boolean, default: true },
    pageSizes: {
      type: Array,
      default: () => [5, 8, 10, 15, 20]
    }
  },
  emits: ['update:limit', 'update:offset', 'refresh'],
  setup (props, context) {
    // 每页条数变化事件
    const handleSizeChange = (size) => {
      const offset = 0 // (props.currentPage - 1) * size
      context.emit('update:limit', size)
      context.emit('update:offset', offset)
      context.emit('refresh')
    }
    // 当前页变化事件
    const handlePageChange = (page) => {
      const offset = (page - 1) * props.limit
      context.emit('update:offset', offset)
      context.emit('refresh', offset)
    }
    // 样式模式
    const cipConfig = useCipConfig()
    const usingPageSizes = computed(() => {
      return getUsingConfig(props.pageSizes, cipConfig.pageSizes)
    })
    const compact = computed(() => {
      return cipConfig.paginationCompact ?? ''
    })
    return {
      handleSizeChange,
      handlePageChange,
      compact,
      usingPageSizes
    }
  }
})
</script>
<style lang="less">
// el-pagination 组件样式与数据中台统一
// el-pagination 紧凑型样式(数据中台)
.cip-pagination{
  .btn-prev,.btn-next{
    i{
      margin: 0 auto;
    }
  }
}
.cip-pagination__compact{
  &.el-pagination.is-background{
    .btn-prev,.btn-next{
      margin: 0;
      background: #fff;
    }
    .btn-prev{
      border: 1px solid rgb(217, 217, 217);
      border-right:none;
      border-radius: 0;
    }
    .btn-next{
      border: 1px solid rgb(217, 217, 217);
      border-radius: 0;
    }
    .el-pager li:not(.disabled).number.active{
      background: #ecf5ff;
      color: @primary;
    }
    .el-pager li.more{
      background: #fff;
      border: 1px solid rgb(217, 217, 217);
      border-right:none;
      border-radius: 0;
      margin: 0;
      color: #a6a6a6;
    }

    .el-pager{
      .number{
        background: #fff;
        border: 1px solid rgb(217, 217, 217);
        border-right:none;
        border-radius: 0;
        margin: 0;
        color: #a6a6a6;
      }
    }
  }
}
</style>