diff --git a/.changeset/kind-bees-move.md b/.changeset/kind-bees-move.md new file mode 100644 index 000000000..6f68bd832 --- /dev/null +++ b/.changeset/kind-bees-move.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +fix(table): 修复分页器被遮挡的问题 (#3040) diff --git a/.changeset/silly-mirrors-turn.md b/.changeset/silly-mirrors-turn.md new file mode 100644 index 000000000..ea0dc90aa --- /dev/null +++ b/.changeset/silly-mirrors-turn.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/pagination": minor +--- + +feat(pagination): Add pageSizeOptionsOverlay api (#3040) diff --git a/packages/ui/pagination/hi-docs.config.mdx b/packages/ui/pagination/hi-docs.config.mdx index db36cc2ed..e67c460cb 100644 --- a/packages/ui/pagination/hi-docs.config.mdx +++ b/packages/ui/pagination/hi-docs.config.mdx @@ -17,3 +17,14 @@ ## Props + +### PopperOverlayProps + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| -------------- | ---------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| className | 弹层类名 | string | - | - | +| matchWidth | 自动计算匹配吸附元素的宽度与其一致 | boolean | true \| false | true | +| placement | 相对吸附元素的位置 | PopperPlacementEnum | "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end" \| "auto" \| "auto-start" \| "auto-end" | "bottom-start" | +| container | 指定 portal 的容器 | HTMLElement | - | - | +| disabledPortal | 禁用 portal | boolean | true \| false | false | +| arrow | 是否展示箭头 | boolean | true \| false | false | diff --git a/packages/ui/pagination/src/DefaultPagination.tsx b/packages/ui/pagination/src/DefaultPagination.tsx index cf70d2859..6b1e18ffc 100644 --- a/packages/ui/pagination/src/DefaultPagination.tsx +++ b/packages/ui/pagination/src/DefaultPagination.tsx @@ -10,6 +10,7 @@ import { PageJumper } from './PageJumper' import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state' import { useLatestCallback } from '@hi-ui/use-latest' import { isFunction } from '@hi-ui/type-assertion' +import { PopperOverlayProps } from '@hi-ui/popper' const _role = 'pagination' const _prefix = getPrefixCls(_role) @@ -36,6 +37,7 @@ export const DefaultPagination = forwardRef ) : null} @@ -252,7 +255,10 @@ export interface PaginationProps extends HiBaseHTMLProps<'div'> { * 指定每页可以显示多少条 */ pageSizeOptions?: number[] - + /** + * 下拉框选择项浮层配置 + */ + pageSizeOptionsOverlay?: PopperOverlayProps /** * 快速跳转时触发 */ diff --git a/packages/ui/pagination/src/PageOption.tsx b/packages/ui/pagination/src/PageOption.tsx index c95c62685..7ccc230f0 100644 --- a/packages/ui/pagination/src/PageOption.tsx +++ b/packages/ui/pagination/src/PageOption.tsx @@ -2,6 +2,7 @@ import React from 'react' import { cx, getPrefixCls } from '@hi-ui/classname' import { Select } from '@hi-ui/select' import { __DEV__ } from '@hi-ui/env' +import { PopperOverlayProps } from '@hi-ui/popper' const _role = 'pagination' const _prefix = getPrefixCls(_role) @@ -9,6 +10,7 @@ const _prefix = getPrefixCls(_role) export const PageOption: React.FC = ({ prefixCls = _prefix, pageSizeOptions, + pageSizeOptionsOverlay, onPageSizeChange, pageSize, }) => { @@ -23,9 +25,7 @@ export const PageOption: React.FC = ({ value={pageSize} clearable={false} onChange={onPageSizeChange as (value: React.ReactText) => void} - overlay={{ - disabledPortal: true, - }} + overlay={pageSizeOptionsOverlay} /> ) } @@ -47,6 +47,10 @@ export interface PageOptionProps { * 指定每页可以显示多少条 */ pageSizeOptions: { id: React.ReactText; title: string }[] + /** + * 下拉框选择项浮层配置 + */ + pageSizeOptionsOverlay?: PopperOverlayProps /** * 每页条数 */ diff --git a/packages/ui/table/stories/pagination.stories.tsx b/packages/ui/table/stories/pagination.stories.tsx index fefe6ea9e..b553f5ca1 100644 --- a/packages/ui/table/stories/pagination.stories.tsx +++ b/packages/ui/table/stories/pagination.stories.tsx @@ -145,6 +145,11 @@ export const Pagination = () => { showJumper: true, pageSize: paginationState.pageSize, pageSizeOptions: [5, 10, 20], + pageSizeOptionsOverlay: { + // 该参数用来配置分页器下拉框的挂载容器,默认是 body,设置为 true 时,会自动寻找最近的元素作为父节点 + // 在浏览器原生的全屏模式中,需要将此值设成 true,否则无法正常显示,若无需在全屏状态下使用,则不需要做任何处理 + disabledPortal: true, + }, onPageSizeChange: (pageSize) => { setPaginationState((prev) => ({ ...prev, diff --git a/packages/ui/table/stories/scrollbar.stories.tsx b/packages/ui/table/stories/scrollbar.stories.tsx index 0283e86c8..cb40987b6 100644 --- a/packages/ui/table/stories/scrollbar.stories.tsx +++ b/packages/ui/table/stories/scrollbar.stories.tsx @@ -363,9 +363,9 @@ export const Scrollbar = () => { zIndex: 9, settings: { // 垂直滑动时,让横向滚动条一直显示在容器底部 - scrollbarXStickToBottom: true, + // scrollbarXStickToBottom: true, // 横向滚动条距离底部的距离 - scrollbarXStickToBottomGap: 20, + // scrollbarXStickToBottomGap: 20, }, } }