trike-datav/src/components/paging.vue

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  page: {
    type: Object,
    default: null
  }
});

const emit = defineEmits(['loadList']);

const pages = ref({
  page: 1,
  total: 0,
  limit: 10,
  pageAll: 1,
})

watch(() => props.page, (n, o) => {
  Object.keys(n).forEach(key => {
    pages.value[key] = n[key];
  })
}, { deep: true, immediate: true })



const prev = () => {
  if (pages.value.page > 1) pages.value.page--;
  emit('loadList', pages.value);
}
const next = () => {
  if (pages.value.page < pages.value.pageAll) pages.value.page++;
  emit('loadList', pages.value)
}
const setPage = (page = 1) => {
  pages.value.page = page;
  emit('loadList', pages.value)
}
const blur = (e) => {
  let value = pages.value.page;
  if (typeof value === 'number' || (typeof value === 'string' && !isNaN(Number(value)))) {
    if (value > pages.value.pageAll) pages.value.page = pages.value.pageAll;
    if (value < 1) pages.value.page = 1;
    emit('loadList', pages.value)
  } else {
    pages.value.page = 1;
    emit('loadList', pages.value)
  }
}

emit('loadList', pages.value)

</script>
  
<template>
  <div class="pad-box">
    <div class="total">共 {{ pages.total }} 条</div>
    <div class="num" @click="prev">{{ "<" }}</div>
    <div class="num" :class="{ c_num: pages.page == 1 }" @click="setPage(1)">
      1
    </div>
    <div
      class="num"
      :class="{ c_num: pages.page == 2 }"
      v-if="pages.pageAll > 1"
      @click="setPage(2)"
    >
      2
    </div>
    <div
      class="num"
      :class="{ c_num: pages.page == 3 }"
      v-if="pages.pageAll > 2"
      @click="setPage(3)"
    >
      3
    </div>
    <div
      class="num"
      :class="{ c_num: pages.page == '' }"
      v-if="pages.pageAll - 3 > 3"
    >
      ...
    </div>
    <div
      class="num"
      :class="{ c_num: pages.page == pages.pageAll - 2 }"
      v-if="pages.pageAll - 2 > 3"
      @click="setPage(pages.pageAll - 2)"
    >
      {{ pages.pageAll - 2 }}
    </div>
    <div
      class="num"
      :class="{ c_num: pages.page == pages.pageAll - 1 }"
      v-if="pages.pageAll - 1 > 3"
      @click="setPage(pages.pageAll - 1)"
    >
      {{ pages.pageAll - 1 }}
    </div>
    <div
      class="num"
      :class="{ c_num: pages.page == pages.pageAll }"
      v-if="pages.pageAll > 3"
      @click="setPage(pages.pageAll)"
    >
      {{ pages.pageAll }}
    </div>
    <div class="num" @click="next">{{ ">" }}</div>
    <div class="btn">
      <div>前往</div>
      <input v-model="pages.page" @blur="blur" @keyup.enter="blur" />
      <div>页</div>
    </div>
  </div>
</template>
      
<style scoped lang="scss">
.pad-box {
  display: flex;
  cursor: pointer;
  div {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
  .total {
    margin: 0 0.5rem;
  }
  .num {
    margin: 0 0.5rem;
  }
  .c_num {
    color: rgba(91, 219, 246, 1);
  }
  .btn {
    display: flex;
    margin-left: 0.5rem;
    align-items: center;
    input {
      background-color: rgba(0, 156, 255, 0.2);
      border: 1px solid rgba(91, 219, 246, 0.4);
      border-radius: 0.2rem;
      width: 2rem;
      margin: 0 1rem;
      text-align: center;
      color: #fff;
    }
  }
}
</style>