fix(pagination): 切换页码后下拉不自动收起等问题 (DevCloudFE#1718)

Author: GreatZPP

packages/devui-vue/devui/pagination/src/components/config-menu.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue';
 import { on, off } from '../../../shared/devui-directive/utils';
 import clickoutsideDirective from '../../../shared/devui-directive/clickoutside';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 export default defineComponent({
  directives: {

packages/devui-vue/devui/pagination/src/components/jump-page.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, PropType, ref, watch, toRefs, ExtractPropTypes } from 'vue';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 const jumpPageProps = {
  goToText: String,
@@ -42,9 +42,16 @@ export default defineComponent({
  };
  // 跳转指定页码
  const jump = (e: KeyboardEvent | 'btn') => {
+ if (isNaN(curPage)) {
+ curPage = 1;
+ }
  if (curPage > totalPages?.value) {
- return;
+ curPage = totalPages?.value;
+ }
+ if (curPage < 1) {
+ curPage = 1;
  }
+
  if ((e === 'btn' || e.key === 'Enter') && cursor?.value !== curPage) {
  emit('changeCursorEmit', curPage);
  }

packages/devui-vue/devui/pagination/src/components/page-nums.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, PropType, computed, ExtractPropTypes } from 'vue';
 import { handlePages } from '../utils';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { PreLinkIcon, NextLinkIcon } from '../components/page-link-icons';
 
 const pageNumBtnProps = {

packages/devui-vue/devui/pagination/src/components/page-size.tsx

@@ -1,22 +1,22 @@
 import { defineComponent, inject, withModifiers, ref } from 'vue';
-import { Icon } from '../../../icon';
+import { Icon } from '@devui/shared/components/icon';
 import { Dropdown } from '../../../dropdown';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { paginationInjectionKey, IPagination } from '../pagination-types';
 
 export default defineComponent({
  setup() {
  const ns = useNamespace('pagination');
  const paginationContext = inject(paginationInjectionKey) as IPagination;
  const iconRotate = ref(0);
- const { size, currentPageSize, pageSizeOptions, pageSizeChange, t } = paginationContext;
+ const { size, currentPageSize, pageSizeOptions, pageSizeDirection, pageSizeChange, t } = paginationContext;
  const onDropdownToggle = (e: boolean) => {
  iconRotate.value = e ? 180 : 0;
  };
 
  return () => (
  <>
- <Dropdown position={['bottom', 'top']} class={ns.e('size-list')} onToggle={onDropdownToggle}>
+ <Dropdown position={pageSizeDirection.value} class={ns.e('size-list')} onToggle={onDropdownToggle}>
  {{
  default: () => (
  <div tabindex="0" class={[ns.e('size'), size.value ? ns.em('size', size.value) : '']}>
@@ -28,8 +28,11 @@ export default defineComponent({
  menu: () => (
  <ul>
  {pageSizeOptions.value.map((item, index) => (
- <li class={{ active: item === currentPageSize.value }}
- onClick={withModifiers(pageSizeChange.bind(null, { value: item }), ['stop'])}
+ <li
+ class={{ active: item === currentPageSize.value }}
+ onClick={() => {
+ pageSizeChange(item);
+ }}
  key={index}>
  {item}
  </li>

packages/devui-vue/devui/pagination/src/pagination-types.ts

@@ -1,19 +1,6 @@
 import type { PropType, ExtractPropTypes, InjectionKey, Ref, WritableComputedRef } from 'vue';
 
-type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp';
-
-interface ConnectedPosition {
- originX: 'start' | 'center' | 'end';
- originY: 'top' | 'center' | 'bottom';
-
- overlayX: 'start' | 'center' | 'end';
- overlayY: 'top' | 'center' | 'bottom';
-
- weight?: number;
- offsetX?: number;
- offsetY?: number;
- panelClass?: string | string[];
-}
+export type PageSizeDirection = 'bottom' | 'top' | 'left' | 'right';
 
 type Size = 'lg' | '' | 'sm';
 
@@ -31,8 +18,8 @@ export const paginationProps = {
  default: () => [5, 10, 20, 50],
  },
  pageSizeDirection: {
- type: Array as PropType<Array<AppendToBodyDirection | ConnectedPosition>>,
- default: () => ['centerDown', 'centerUp'],
+ type: Array as PropType<Array<PageSizeDirection>>,
+ default: () => ['bottom', 'top'],
  },
  pageIndex: {
  type: Number,
@@ -121,7 +108,8 @@ export interface IPagination {
  size: Ref<Size>;
  currentPageSize: WritableComputedRef<number>;
  pageSizeOptions: Ref<number[]>;
- pageSizeChange: (val: Record<string, string | number>) => void;
+ pageSizeDirection: Ref<PageSizeDirection[]>;
+ pageSizeChange: (val: number) => void;
  t: (path: string) => void;
 }
 

packages/devui-vue/devui/pagination/src/pagination.scss

@@ -41,6 +41,11 @@
  &.#{$devui-prefix}-pagination__size--lg {
  height: 46px;
  }
+
+ & > .#{$devui-prefix}-icon__container {
+ display: flex;
+ align-items: center;
+ }
  }
 
  .#{$devui-prefix}-pagination__total-size {
@@ -384,7 +389,8 @@
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
- transition: color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth,
+ transition:
+ color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth,
  background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth;
 
  &:hover:not(.active) {

packages/devui-vue/devui/pagination/src/pagination.tsx

@@ -6,8 +6,8 @@ import ConfigMenu from './components/config-menu';
 import JumpPage from './components/jump-page';
 import PageNumBtn from './components/page-nums';
 import PageSize from './components/page-size';
-import { useNamespace } from '../../shared/hooks/use-namespace';
-import { createI18nTranslate } from '../../locale/create';
+import { useNamespace } from '@devui/shared/utils';
+import { createI18nTranslate } from '@devui/shared/components/locale/create';
 import './pagination.scss';
 
 export default defineComponent({
@@ -26,6 +26,7 @@ export default defineComponent({
  const {
  autoHide,
  pageSizeOptions,
+ pageSizeDirection,
  total,
  canChangePageSize,
  lite,
@@ -82,8 +83,8 @@ export default defineComponent({
  };
 
  // 每页条数改变
- const pageSizeChange = (val: Record<string, string | number>) => {
- currentPageSize.value = val.value as number;
+ const pageSizeChange = (val: number) => {
+ currentPageSize.value = val as number;
  // 页数改变后，如果当前页码超出最大页码时修正
  if (props.autoFixPageIndex) {
  nextTick(() => {
@@ -92,15 +93,15 @@ export default defineComponent({
  }
  });
  }
- emit('pageSizeChange', val.value as number);
+ emit('pageSizeChange', val);
  };
 
  // 极简模式下的跳转页码
  const litePageIndexChange = (page: { name: string; value: number }) => {
  changeCursorEmit(page.value);
  };
 
- provide(paginationInjectionKey, { size, currentPageSize, pageSizeOptions, pageSizeChange, t });
+ provide(paginationInjectionKey, { size, currentPageSize, pageSizeOptions, pageSizeDirection, pageSizeChange, t });
 
  return () =>
  // autoHide 为 true，并且 pageSizeOptions 最小值大于 total，则不展示分页

packages/devui-vue/docs/components/pagination/index.md

@@ -243,7 +243,7 @@ export default defineComponent({
  @page-index-change="pageIndexChangeWithoutFix"
  @page-size-change="pageSizeChangeWithoutFix"
  :page-size-options="pager.pageSizeOptions"
- :page-size-direction="['centerUp']"
+ :page-size-direction="['right']"
  />
 </template>
 <script>
@@ -423,8 +423,8 @@ export default defineComponent({
 | :------------------- | :---------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------- | :-------------------- |
 | page-size | `number` | 10 | 可选，每页显示最大条目数量 | [基本用法](#基本用法) |
 | total | `number` | 0 | 可选，显示的总条目数 | [基本用法](#基本用法) |
-| page-size-options | `number[] ` | 10 | 可选，分页每页最大条目数量的下拉框的数据源，<br>默认有四种选择 5, 10, 20, 50 | [多种配置](#多种配置) |
-| page-size-direction | [AppendToBodyDirection](#appendtobodydirection)\[\]<br>\| [ConnectedPosition](#connectedposition)\[\] | [<br>&nbsp;&nbsp;'centerDown', <br>&nbsp;&nbsp;'centerUp'<br>] | 可选，设置分页每页条目的下拉框展示的方向 | [多种配置](#多种配置) |
+| page-size-options | `number[]` | 10 | 可选，分页每页最大条目数量的下拉框的数据源，<br>默认有四种选择 5, 10, 20, 50 | [多种配置](#多种配置) |
+| page-size-direction | [PageSizeDirection](#pagesizedirection) | ['bottom', 'top'] | 可选，设置分页每页条目的下拉框展示的方向 | [多种配置](#多种配置) |
 | page-index | `number` | 1 | 可选，初始化页码 | [基本用法](#基本用法) |
 | max-items | `number` | 10 | 可选，分页最多显示几个按钮 | [基本用法](#基本用法) |
 | pre-link | `string` | -- | 可选，上一页按钮显示图标，<br>默认设置为左箭头图标 | [基本用法](#基本用法) |
@@ -458,19 +458,8 @@ export default defineComponent({
 type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp';
 ```
 
-#### ConnectedPosition
+#### PageSizeDirection
 
 ```ts
-interface ConnectedPosition {
- originX: 'start' | 'center' | 'end';
- originY: 'top' | 'center' | 'bottom';
-
- overlayX: 'start' | 'center' | 'end';
- overlayY: 'top' | 'center' | 'bottom';
-
- weight?: number;
- offsetX?: number;
- offsetY?: number;
- panelClass?: string | string[];
-}
+type PageSizeDirection = 'bottom' | 'top' | 'left' | 'right';
 ```