fix(comp: pagination): Showquickjumper does not work in simple mode (#…

…928)
IDuxFE · May 25, 2022 · 2955e7f · 2955e7f
1 parent ae8fdef
commit 2955e7f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/packages/components/pagination/__tests__/__snapshots__/pagination.spec.ts.snap b/packages/components/pagination/__tests__/__snapshots__/pagination.spec.ts.snap
@@ -17,7 +17,7 @@ exports[`Pagination > render work 2`] = `
 "<ul class=\\"ix-pagination ix-pagination-simple ix-pagination-md\\">
   <li class=\\"ix-pagination-total\\">共 50 项</li>
   <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
-  <li class=\\"ix-pagination-item\\"><input class=\\"ix-input ix-input-md\\"><span class=\\"ix-pagination-item-slash\\">/</span><span>5</span></li>
+  <li class=\\"ix-pagination-item\\">1<span class=\\"ix-pagination-item-slash\\">/</span><span>5</span></li>
   <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
 </ul>"
 `;

diff --git a/packages/components/pagination/__tests__/pagination.spec.ts b/packages/components/pagination/__tests__/pagination.spec.ts
@@ -122,7 +122,9 @@ describe('Pagination', () => {
 
   test('simple work', async () => {
     const onUpdatePageIndex = vi.fn()
-    const wrapper = PaginationMount({ props: { total: 50, simple: true, 'onUpdate:pageIndex': onUpdatePageIndex } })
+    const wrapper = PaginationMount({
+      props: { total: 50, simple: true, showQuickJumper: true, 'onUpdate:pageIndex': onUpdatePageIndex },
+    })
 
     expect(wrapper.find('.ix-pagination-item-slash').exists()).toBeTruthy()
 
@@ -149,6 +151,10 @@ describe('Pagination', () => {
     await next.trigger('click')
 
     expect(onUpdatePageIndex).toBeCalledWith(5)
+
+    await wrapper.setProps({ showQuickJumper: false })
+
+    expect(wrapper.find('.ix-input').exists()).toBeFalsy()
   })
 
   test('size work', async () => {

diff --git a/packages/components/pagination/demo/Simple.vue b/packages/components/pagination/demo/Simple.vue
@@ -1,5 +1,7 @@
 <template>
-  <IxPagination :total="500" simple />
-  <br />
-  <IxPagination :total="500" simple disabled />
+  <IxSpace vertical block>
+    <IxPagination :total="500" simple />
+    <IxPagination :total="500" simple showQuickJumper />
+    <IxPagination :total="500" simple disabled />
+  </IxSpace>
 </template>
diff --git a/packages/components/pagination/src/Pagination.tsx b/packages/components/pagination/src/Pagination.tsx
@@ -75,12 +75,16 @@ export default defineComponent({
         children.push(<Item disabled={_activeIndex === 1} type="prev" />)
         children.push(
           <li class={`${prefixCls}-item`}>
-            <ɵInput
-              disabled={props.disabled}
-              size={size.value}
-              value={_activeIndex.toString()}
-              onKeydown={jumpToIndex}
-            />
+            {showQuickJumper.value ? (
+              <ɵInput
+                disabled={props.disabled}
+                size={size.value}
+                value={_activeIndex.toString()}
+                onKeydown={jumpToIndex}
+              />
+            ) : (
+              _activeIndex
+            )}
             <span class={`${prefixCls}-item-slash`}>/</span>
             <span>{_lastIndex}</span>
           </li>,