vue3自定义分页器

代码逻辑

<div class="pagination">
    <div
      class="left"
      @click="perPage"
      :style="{ cursor: leftClickState ? 'no-drop' : '' }"
    >
      <i class="iconfont icon-a-xiangxia"></i>
    </div>
    <div
      class="number"
      v-for="(it, ix) in pageCollage"
      :key="'pagination' + ix"
      @click="currentPage(it)"
      :class="index == it ? 'bg' : ''"
    >
      {{ it == "left" || it == "right" ? "..." : it }}
    </div>
    <div
      class="right"
      @click="nextPage"
      :style="{ cursor: rightClickState ? 'no-drop' : '' }"
    >
      <i class="iconfont icon-a-xiangxia"></i>
    </div>
</div>

import { ref, computed, watch } from "vue";
let index = ref(1);

const props = defineProps({
  total: {
    type: Number,
    default: 10,
  },
});

const emit = defineEmits(["change"]);

//上一页的方法
function perPage() {
  if (index.value === 1) {
    index.value = 1;
  } else {
    index.value = index.value - 1;
  }
}
//下一页的方法
function nextPage() {
  if (index.value == props.total) {
    index.value = props.total;
  } else {
    index.value = index.value + 1;
  }
}
//点击具体的一页
function currentPage(page) {
  if (page === "left") {
    index.value = index.value - 4;
    if (index.value <= 0) index.value == 1;
  } else if (page == "right") {
    index.value = index.value + 4;
    if (index.value > props.total) index.value = props.total;
  } else {
    index.value = page;
  }
}

const pageCollage = computed(() => {
  let nowIndex = index.value;
  let allPages = props.total;

  if (allPages < 7) {
    return allPages;
  }

  if (nowIndex < 5) {
    return [1, 2, 3, 4, 5, "right", allPages];
  } else if (nowIndex > allPages - 4) {
    return [
      1,
      "left",
      allPages - 4,
      allPages - 3,
      allPages - 2,
      allPages - 1,
      allPages,
    ];
  } else {
    console.log('nowIndex',nowIndex)
    return [1, "left", nowIndex - 1, nowIndex, nowIndex + 1, "right", allPages];
  }
});

const leftClickState = computed(() => {
  if (index.value <= 1) return true;
  else return false;
});

const rightClickState = computed(() => {
  if (index.value >= props.total) return true;
  else return false;
});

watch(index, (newval, oldval) => {
  emit("change", newval);
});