feat: 优化Drawer滚动 & 优化VirtualList参数配置

WeBankFinTech · Jun 18, 2023 · c507a49 · c507a49
1 parent 08273d0
commit c507a49
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/components/drawer/drawer.tsx b/components/drawer/drawer.tsx
@@ -12,7 +12,8 @@ import {
 } from 'vue';
 import { isNumber } from 'lodash-es';
 import getPrefixCls from '../_util/getPrefixCls';
-import FButton from '../button/button';
+import FButton from '../button';
+import FScrollbar from '../scrollbar';
 import { CloseOutlined } from '../icon';
 import PopupManager from '../_util/popupManager';
 import useLockScreen from '../_util/use/useLockScreen';
@@ -215,9 +216,12 @@ const Drawer = defineComponent({
                                     onClick={(event) => event.stopPropagation()}
                                 >
                                     {getHeader()}
-                                    <div class={`${prefixCls}-body`}>
+                                    <FScrollbar
+                                        class={`${prefixCls}-body-wrapper`}
+                                        containerClass={`${prefixCls}-body-container`}
+                                    >
                                         {ctx.slots.default?.()}
-                                    </div>
+                                    </FScrollbar>
                                     {getFooter()}
                                 </div>
                             </div>

diff --git a/components/drawer/style/index.less b/components/drawer/style/index.less
@@ -21,7 +21,7 @@
         .fixed-full();
         display: flex;
     }
-    
+
     &-wrapper {
         position: relative;
         display: flex;
@@ -30,7 +30,7 @@
         border-radius: var(--f-border-radius-base);
         box-shadow: @shadow-down;
     }
-    
+
     &-header {
         position: relative;
         display: flex;
@@ -47,10 +47,13 @@
         }
     }
 
-    &-body {
+    &-body-wrapper {
         flex: 1;
+    }
+
+    &-body-container {
+        box-sizing: border-box;
         padding: @padding-md calc(@padding-md + @padding-xs);
-        overflow: auto;
         color: var(--f-sub-head-color);
         font-size: var(--f-font-size-base);
     }
@@ -78,7 +81,7 @@
     &-mask-fade-enter-active {
         transition: opacity @animation-duration-slow @ease-base-in;
     }
-    
+
     &-mask-fade-leave-to,
     &-mask-fade-enter-from {
         opacity: 0;
@@ -155,4 +158,4 @@
         }
     }
 
-}
+}
diff --git a/components/virtual-list/props.ts b/components/virtual-list/props.ts
@@ -17,6 +17,7 @@ export const virtualProps = {
     dataSources: {
         type: Array as PropType<DataSource[]>,
         required: true,
+        default: (): DataSource[] => [],
     },
     keeps: {
         type: Number,

diff --git a/docs/.vitepress/components/drawer/common.vue b/docs/.vitepress/components/drawer/common.vue
@@ -48,7 +48,7 @@
             :footer="true"
             @ok="show[4] = false"
         >
-            <div>我是内容...</div>
+            <div style="height: 1000px">我是内容...</div>
             <div>我是内容...</div>
             <div>我是内容...</div>
         </FDrawer>