✨ feat: support fold pagination as ...
#225
Conversation
✅ Deploy Preview for pfccblog ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR implements a folding pagination feature that displays ellipsis (...) to collapse page numbers when there are more than 7 pages, improving the UI for blogs with many pages.
- Adds computed property
pagesthat intelligently determines which page numbers to show and where to place ellipses - Updates the template to conditionally render page numbers as links or ellipses as non-clickable spans
- Imports
computedfrom Vue to support the reactive pagination logic
| if (pageIndex >= numPages - 3) { | ||
| return [1, '...', numPages - 4, numPages - 3, numPages - 2, numPages - 1, numPages] |
There was a problem hiding this comment.
When numPages is exactly 8 and pageIndex is 5 (which satisfies pageIndex >= numPages - 3), the returned array is [1, '...', 4, 5, 6, 7, 8]. This means the ellipsis hides only pages 2 and 3. However, the general best practice for pagination is to only use an ellipsis when hiding at least 2 or more pages. Consider adjusting the threshold conditions to ensure ellipses are only shown when they actually save space (hiding 2+ pages), otherwise the ellipsis doesn't provide value and can confuse users.
Before:
After: