diff --git a/packages/web-vue/components/list/README.en-US.md b/packages/web-vue/components/list/README.en-US.md index 78ff265d0..3754a9ad8 100644 --- a/packages/web-vue/components/list/README.en-US.md +++ b/packages/web-vue/components/list/README.en-US.md @@ -41,7 +41,7 @@ description: The most basic list display, which can carry text, lists, pictures, |hoverable|Whether to display the selected style|`boolean`|`false`|| |pagination-props|List pagination configuration|`PaginationProps`|`-`|| |grid-props|List grid configuration|`object`|`-`|| -|max-height|Maximum height of the list|`number`|`0`|| +|max-height|Maximum height of the list|`number \| string`|`0`|| |bottom-offset|Trigger the distance threshold to reach the bottom|`number`|`0`|| |virtual-list-props|Pass virtual list properties, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`|| |scrollbar|Whether to enable virtual scroll bar|`boolean \| ScrollbarProps`|`true`|2.38.0| diff --git a/packages/web-vue/components/list/README.zh-CN.md b/packages/web-vue/components/list/README.zh-CN.md index 5fdf1791c..a86b07f69 100644 --- a/packages/web-vue/components/list/README.zh-CN.md +++ b/packages/web-vue/components/list/README.zh-CN.md @@ -39,7 +39,7 @@ description: 最基础的列表展示,可承载文字、列表、图片、段 |hoverable|是否显示选中样式|`boolean`|`false`|| |pagination-props|列表分页配置|`PaginationProps`|`-`|| |grid-props|列表栅格配置|`object`|`-`|| -|max-height|列表的最大高度|`number`|`0`|| +|max-height|列表的最大高度|`number \| string`|`0`|| |bottom-offset|触发到达底部的距离阈值|`number`|`0`|| |virtual-list-props|传递虚拟列表属性,传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`|| |scrollbar|是否开启虚拟滚动条|`boolean \| ScrollbarProps`|`true`|2.38.0| diff --git a/packages/web-vue/components/list/list.tsx b/packages/web-vue/components/list/list.tsx index 1416037f9..97159c6f0 100644 --- a/packages/web-vue/components/list/list.tsx +++ b/packages/web-vue/components/list/list.tsx @@ -25,6 +25,7 @@ import { getAllElements } from '../_utils/vue-utils'; import Scrollbar, { ScrollbarProps } from '../scrollbar'; import { useComponentRef } from '../_hooks/use-component-ref'; import { useScrollbar } from '../_hooks/use-scrollbar'; +import { isNumber } from '../_utils/is'; export default defineComponent({ name: 'List', @@ -95,7 +96,7 @@ export default defineComponent({ * @en Maximum height of the list */ maxHeight: { - type: Number, + type: [String, Number] as PropType, default: 0, }, /** @@ -319,8 +320,11 @@ export default defineComponent({ ]); const contentStyle = computed(() => { - if (props.maxHeight > 0) { - return { maxHeight: `${props.maxHeight}px`, overflowY: 'auto' }; + if (props.maxHeight) { + const maxHeight = isNumber(props.maxHeight) + ? `${props.maxHeight}px` + : props.maxHeight; + return { maxHeight, overflowY: 'auto' }; } return undefined; });