Vue.JS自定义截断分页问题

Question

我需要一个帮助，从一个组件动态创建一个带有省略号的分页

Javascript代码。假设我们有10页

<script setup>
import { ref } from "vue"
// page starts with #1
const pageStart = ref(1)
const pages = ref(10)
</script>

这是我的模板:

<template>
<div>
<ul v-for="number in pages" :key="number">
<li v-if="number < pageStart">
<button>{{number}}</button>
</li>
<li v-else-if="number > 2">
...
</li>
</ul>
</div>
</template>

到目前为止，我得到的结果是:

1 2 3 ... ... ... ... ...  ...

但是我想达到这样的效果

1 2 3 ... 10

或

1 ... 3 4 5 ... 10

Answer 1

您得到这个结果是因为对于4-10，您输出的是...

你也在重复UL所以你的输出看起来像

<ul>
<li>1</li>
</ul>
<ul>
<li>2</li>
...

试

<template>
<ul>
<template v-for="number in pages" :key="number">
<li v-if="number < pageStart">
<button>{{number}}</button>
</li>
<li v-else-if="number === Math.ceil(pages/2)">
...
</li>
</template>
</ul>
</template>

如果页码是总页数的一半(如果是奇数则四舍五入)，则只会输出...，因此您不会在所有中间页面中得到重复的省略号，否则根本不会呈现LI。

如果你想要1 2 3 ... 8 9 10这样的东西，就用

<li v-if="number <= 3 || number > (pages - 3)">
<button>{{number}}</button>
</li>

Answer 2

我已经建立了一个解决方案，

• 当前页面
• 下一页和上一页
• 第一页和最后一页

所示。省略号通过CSS添加。

<template>
<section class="menu">
<ul>
<button @click="previous">prev</button>
<template v-for="page in pages" :key="page">
<li :class="{current: currentPage === page, hide: !shouldShowPageInMenu(page)}">{{page}}</li>
</template>
<button @click="next">next</button>
</ul>
</section>
</template>

使用以下JS和CSS:

const currentPage = ref(5)
const pages = ref(10)
function shouldShowPageInMenu(page) {
return (isCurrentPage(page) || isNextOrPreviousPage(page) || isFirstOrLastPage(page))
}

function isCurrentPage(page) {
if(page === currentPage.value) {
return true
}
}

function isNextOrPreviousPage(page) {
const current = currentPage.value
if(page+1 === current || page-1 === current) {
return true
}
}

function isFirstOrLastPage(page) {
if(page === 1 || page === pages.value) {
return true
}
}

// ...
li.current {
font-weight: bold;
color: black;
}
li.hide {
display: none;
}
li.hide + :not(.hide)::before {
content: '...';
display: inline-block;
margin-right: 0.4rem;
}

有一个带有完整示例的Vue SFC Playground。