refactor: update

components/drawer/demo/index.vue

@@ -5,8 +5,8 @@
     <placement />
     <render-in-current />
     <form-in-drawer />
-    <user-profile />
     <multi-level-drawer />
+    <user-profile />
     <size />
   </demo-sort>
 </template>

components/drawer/demo/multi-level-drawer.vue

@@ -1,6 +1,6 @@
 <docs>
 ---
-order: 6
+order: 5
 title:
   zh-CN: 多层抽屉
   en-US: Multi-level drawer

components/drawer/demo/render-in-current.vue

@@ -48,10 +48,10 @@ Render in current dom. custom container, check getContainer.
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
-    const visible = ref(true);
+    const visible = ref(false);
 
     const afterVisibleChange = (bool: boolean) => {
       console.log('visible', bool);
@@ -65,10 +65,6 @@ export default defineComponent({
       visible.value = false;
     };
 
-    onMounted(() => {
-      visible.value = false;
-    });
-
     return {
       visible,
       afterVisibleChange,

components/drawer/demo/size.vue

@@ -17,15 +17,11 @@ The default width (or height) of Drawer is `378px`, and there is a presetted lar
 </docs>
 
 <template>
-  <a-button type="primary" @click="showDrawer('default')">Open Default Size (378px)</a-button>
+  <a-button type="primary" style="margin-right: 8px" @click="showDrawer('default')">
+    Open Default Size (378px)
+  </a-button>
   <a-button type="primary" @click="showDrawer('large')">Open Large Size (736px)</a-button>
-  <a-drawer
+  <a-drawer title="Basic Drawer" :size="size" :visible="visible" @close="onClose">
-    title="Basic Drawer"
-    :size="size"
-    :placement="placement"
-    :visible="visible"
-    @close="onClose"
-  >
     <template #extra>
       <a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
       <a-button type="primary" @click="onClose">Submit</a-button>

components/drawer/demo/user-profile.vue

@@ -1,6 +1,6 @@
 <docs>
 ---
-order: 5
+order: 6
 title:
   zh-CN: 信息预览抽屉
   en-US: Preview drawer

components/vc-drawer/src/DrawerChild.tsx

@@ -6,6 +6,7 @@ import omit from '../../_util/omit';
 import supportsPassive from '../../_util/supportsPassive';
 import { DrawerChildProps } from './IDrawerPropTypes';
 import type { IDrawerChildProps } from './IDrawerPropTypes';
+import setStyle from '../../_util/setStyle';
 
 import {
   addEventListener,
@@ -21,11 +22,48 @@ import {
 
 const currentDrawer: Record<string, boolean> = {};
 
+export interface scrollLockOptions {
+  container: HTMLElement;
+}
+
+const createScrollLocker = (options: scrollLockOptions) => {
+  let scrollBarSize = 0;
+  let cacheStyleMap = new Map();
+  return {
+    getContainer: () => {
+      return options?.container;
+    },
+    getCacheStyleMap: () => {
+      return cacheStyleMap;
+    },
+    lock: () => {
+      cacheStyleMap.set(
+        options.container,
+        setStyle(
+          {
+            width: scrollBarSize !== 0 ? `calc(100% - ${scrollBarSize}px)` : undefined,
+            overflow: 'hidden',
+            overflowX: 'hidden',
+            overflowY: 'hidden',
+          },
+          {
+            element: options.container || document.body,
+          },
+        ),
+      );
+    },
+    unLock: () => {
+      setStyle(cacheStyleMap.get(options.container) || {}, { element: options.container });
+      cacheStyleMap.delete(options.container);
+    },
+  };
+};
+
 const DrawerChild = defineComponent({
   inheritAttrs: false,
   props: DrawerChildProps,
   emits: ['close', 'handleClick', 'change'],
-  setup(props, { emit, slots, expose }) {
+  setup(props, { emit, slots }) {
     const state = reactive({
       levelDom: [],
       dom: null,
@@ -40,6 +78,7 @@ const DrawerChild = defineComponent({
         x: null,
         y: null,
       },
+      scrollLocker: null,
     });
 
     onMounted(() => {
@@ -55,6 +94,13 @@ const DrawerChild = defineComponent({
             .replace('.', Math.round(Math.random() * 9).toString()),
         ).toString(16)}`;
         getLevelDom(props);
+
+        if (container) {
+          state.scrollLocker = createScrollLocker({
+            container: container.parentNode,
+          });
+        }
+
         if (open) {
           if (container && container.parentNode === document.body) {
             currentDrawer[state.drawerId] = open;
@@ -67,14 +113,15 @@ const DrawerChild = defineComponent({
             }
           });
           if (showMask) {
-            props.scrollLocker?.lock();
+            state.scrollLocker?.lock();
           }
         }
       });
     });
 
     onUpdated(() => {
-      const { open, getContainer, scrollLocker, showMask, autoFocus } = props;
+      const { open, getContainer, showMask, autoFocus } = props;
+
       const container = getContainer?.();
       if (container && container.parentNode === document.body) {
         currentDrawer[state.drawerId] = !!open;
@@ -85,21 +132,21 @@ const DrawerChild = defineComponent({
           domFocus();
         }
         if (showMask) {
-          scrollLocker?.lock();
+          state.scrollLocker?.lock();
         }
       } else {
-        scrollLocker?.unLock();
+        state.scrollLocker?.unLock();
       }
     });
 
     onUnmounted(() => {
-      const { open, scrollLocker } = props;
+      const { open } = props;
       delete currentDrawer[state.drawerId];
       if (open) {
         setLevelTransform(false);
         document.body.style.touchAction = '';
       }
-      scrollLocker?.unLock();
+      state.scrollLocker?.unLock();
     });
 
     watch(
@@ -400,28 +447,6 @@ const DrawerChild = defineComponent({
       };
     };
 
-    const getDerivedStateFromProps = (
-      props: IDrawerChildProps,
-      { prevProps }: { prevProps: IDrawerChildProps },
-    ) => {
-      const nextState = {
-        prevProps: props,
-      };
-      if (prevProps !== undefined) {
-        const { placement, level } = props;
-        if (placement !== prevProps.placement) {
-          // test 的 bug, 有动画过场，删除 dom
-          state.contentDom = null;
-        }
-        if (level !== prevProps.level) {
-          getLevelDom(props);
-        }
-      }
-      return nextState;
-    };
-
-    expose({ getDerivedStateFromProps });
-
     return () => {
       const {
         width,