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'
import { generateProps, generateEmits } from '../helper/component-util'
import { componentScheme } from './component.scheme'
export default defineComponent({
  name: 'CipPagination',
  components: { ElPagination },
  props: generateProps(componentScheme),
  emits: generateEmits(componentScheme),
  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{
  // element-plus2 将el-pagination设置为flex导致起宽度变为100%无法使用 text-align对其进行位置控制将其设置为inline-flex
  display: inline-flex;
  .btn-prev,.btn-next{
    i{
      margin: 0 auto;
    }
  }
}
.cip-pagination__compact{
  &.@{elNamespace}-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;
    }
    .@{elNamespace}-pager li:not(.disabled).number.active{
      background: #ecf5ff;
      color: @primary;
    }
    .@{elNamespace}-pager li.more{
      background: #fff;
      border: 1px solid rgb(217, 217, 217);
      border-right:none;
      border-radius: 0;
      margin: 0;
      color: #a6a6a6;
    }

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