public-fuse/src/components/pagination/index.vue

<template>
  <div class="pag-block no-sizes">
    <el-pagination
      layout="total, prev, pager, next"
      @current-change="(data: number) => emit('current-change', data)"
      :current-page="currentPage"
      :page-size="currSize"
      background
      :total="total"
    >
    </el-pagination>

    <div
      class="sizes-down"
      :style="{ left: 40 + total.toString().length * 10 + 'px' }"
      v-if="!hideSizes"
    >
      <span class="el-dropdown-link" @click.stop="show = !show">
        {{ currSize }} 条/页
        <i :class="show ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
      </span>
      <ul @click.stop v-if="show">
        <li
          v-for="num in csizes"
          :key="num"
          :class="{ selected: num === currSize }"
          @click="clickHandle(num)"
        >
          {{ num }}条/页
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onActivated, onUnmounted, ref, watch, watchEffect } from "vue";

const props = withDefaults(
  defineProps<{
    currentPage: number;
    size?: number;
    total: number;
    hideSizes?: boolean;
    csizes?: number[];
  }>(),
  {
    hideSizes: true,
    csizes: () => [12, 24],
  }
);

const emit = defineEmits<{
  (e: "size-change", size: number): void;
  (e: "current-change", size: number): void;
}>();

const currSize = ref(props.size || props.csizes[0]);
const show = ref(false);

watchEffect(() => {
  if (currSize.value != props.size) {
    emit("size-change", currSize.value);
  }
});

const clickHandle = (num: number) => {
  currSize.value = num;
  show.value = false;
};

const docClick = () => (show.value = false);

onActivated(() => {
  document.documentElement.addEventListener("click", docClick, false);
});
onUnmounted(() => {
  document.documentElement.removeEventListener("click", docClick, false);
});
</script>

<style lang="scss" scope>
.pag-block {
  position: relative;
  z-index: 88;

  .sizes-down {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    span {
      box-sizing: border-box;
      font-size: 13px;
      appearance: none;
      color: rgb(96, 98, 102);
      display: inline-block;
      height: 30px;
      line-height: 30px;
      min-width: 100px;
      border: 1px solid rgb(220, 223, 230);
      border-radius: 4px;
      outline: none;
      padding: 0px 35px 0 15px;
      cursor: pointer;

      i {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: inherit;
      }
    }

    ul {
      width: 100%;
      bottom: 100%;

      position: absolute;
      z-index: 1001;
      border: solid 1px #e4e7ed;
      border-radius: 4px;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      margin: 5px 0;
      list-style: none;
      padding: 6px 0;
      margin: 0;
      box-sizing: border-box;

      li {
        font-size: 14px;
        padding: 0 20px;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #606266;
        height: 34px;
        line-height: 34px;
        box-sizing: border-box;
        cursor: pointer;

        &:hover {
          background-color: #f5f7fa;
        }

        &.selected {
          color: #d6000f;
          font-weight: bold;
        }
      }
    }
  }
}
</style>