feat(list): Scroll maxHeight supports string type (#2544)

* feat(list): Scroll maxHeight supports string type * feat(list): Scroll maxHeight supports string type
arco-design · Jul 21, 2023 · d059a6f · d059a6f
1 parent 1b595be
commit d059a6f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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<string | number>,
       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;
     });