feat(Pagination): add show-prev-button, show-next-button props (#11780)

packages/vant/src/pagination/Pagination.tsx

@@ -6,6 +6,7 @@ import {
 } from 'vue';
 import {
   clamp,
+  truthProp,
   makeStringProp,
   makeNumberProp,
   makeNumericProp,
@@ -40,6 +41,8 @@ export const paginationProps = {
   showPageSize: makeNumericProp(5),
   itemsPerPage: makeNumericProp(10),
   forceEllipses: Boolean,
+  showPrevButton: truthProp,
+  showNextButton: truthProp,
 };
 
 export type PaginationProps = ExtractPropTypes<typeof paginationProps>;
@@ -128,7 +131,12 @@ export default defineComponent({
     );
 
     const renderPrevButton = () => {
-      const { mode, modelValue } = props;
+      const { mode, modelValue, showPrevButton } = props;
+
+      if (!showPrevButton) {
+        return;
+      }
+
       const slot = slots['prev-text'];
       const disabled = modelValue === 1;
       return (
@@ -150,7 +158,12 @@ export default defineComponent({
     };
 
     const renderNextButton = () => {
-      const { mode, modelValue } = props;
+      const { mode, modelValue, showNextButton } = props;
+
+      if (!showNextButton) {
+        return;
+      }
+
       const slot = slots['next-text'];
       const disabled = modelValue === count.value;
       return (

packages/vant/src/pagination/README.md

@@ -81,6 +81,8 @@ export default {
 | page-count | The total number of pages, if not set, will be calculated based on `total-items` and `items-per-page` | _number \| string_ | `-` |
 | show-page-size | Count of page size to show | _number \| string_ | `5` |
 | force-ellipses | Whether to show ellipses | _boolean_ | `false` |
+| show-prev-button `v4.2.1` | Whether to show prev button | _boolean_ | `true` |
+| show-next-button `v4.2.1` | Whether to show next button | _boolean_ | `true` |
 
 ### Events
 

packages/vant/src/pagination/README.zh-CN.md

@@ -89,6 +89,8 @@ export default {
 | items-per-page | 每页记录数 | _number \| string_ | `10` |
 | show-page-size | 显示的页码个数 | _number \| string_ | `5` |
 | force-ellipses | 是否显示省略号 | _boolean_ | `false` |
+| show-prev-button `v4.2.1` | 是否展示上一页按钮 | _boolean_ | `true` |
+| show-next-button `v4.2.1` | 是否展示下一页按钮 | _boolean_ | `true` |
 
 ### Events
 

packages/vant/src/pagination/test/index.spec.ts

@@ -52,3 +52,17 @@ test('should emit change event after the page is changed', async () => {
   await wrapper.find('.van-pagination__item--next button').trigger('click');
   expect(wrapper.emitted('change')).toEqual([[3], [2], [3]]);
 });
+
+test('should allow to hide prev button and next button', () => {
+  const wrapper = mount(Pagination, {
+    props: {
+      totalItems: 50,
+      showPageSize: 5,
+      showPrevButton: false,
+      showNextButton: false,
+    },
+  });
+
+  expect(wrapper.find('.van-pagination__item--prev').exists()).toBeFalsy();
+  expect(wrapper.find('.van-pagination__item--next').exists()).toBeFalsy();
+});

packages/vant/src/sticky/Sticky.tsx

@@ -2,12 +2,12 @@ import {
   ref,
   watch,
   computed,
+  nextTick,
   reactive,
   defineComponent,
   type PropType,
   type CSSProperties,
   type ExtractPropTypes,
-  nextTick,
 } from 'vue';
 
 // Utils
@@ -16,13 +16,13 @@ import {
   isHidden,
   unitToPx,
   numericProp,
+  windowWidth,
+  windowHeight,
   getScrollTop,
   getZIndexStyle,
   makeStringProp,
   makeNumericProp,
   createNamespace,
-  windowWidth,
-  windowHeight,
 } from '../utils';
 
 // Composables