fix: drawer&dialog scroll through

examples/drawer/drawer.md

@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Drawer Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -19,12 +18,12 @@ footer | Boolean / Slot / Function | true | 底部操作栏，默认会有“确
 header | String / Boolean / Slot / Function | undefined | 头部内容。值为 true 显示空白头部，值为 false 不显示头部，值类型为 string 则直接显示值，值类型为 TNode 表示自定义头部内容。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 mode | String | overlay | 展开方式，有两种：直接展示在内容上方 和 推开内容区域。可选项：overlay/push | N
 placement | String | right | 抽屉方向。可选项：left/right/top/bottom | N
+preventScrollThrough | Boolean | true | 防止滚动穿透 | N
 showInAttachedElement | Boolean | false | 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative | N
 showOverlay | Boolean | true | 是否显示遮罩层 | N
 size | String | small | 尺寸，支持 'small', 'medium', 'large'，'35px', '30%',  '3em' 等。纵向抽屉调整的是抽屉宽度，横向抽屉调整的是抽屉高度 | N
 sizeDraggable | Boolean | false | 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度 | N
-visible | Boolean | false | 组件是否可见。支持语法糖 | N
-defaultVisible | Boolean | false | 组件是否可见。非受控属性 | N
+visible | Boolean | false | 组件是否可见 | N
 zIndex | Number | - | 抽屉层级，样式默认为 1500 | N
 onCancel | Function |  | 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件。`(context: { e: MouseEvent }) => {}` | N
 onClose | Function |  | 关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/drawer/type.ts)。`(context: DrawerCloseContext) => {}` | N

src/dialog/dialog.tsx

@@ -11,9 +11,11 @@ import TransferDom from '../utils/transfer-dom';
 import { ClassName, Styles } from '../common';
 import { emitEvent } from '../utils/event';
 import mixins from '../utils/mixins';
+import { addClass, removeClass } from '../utils/dom';
 import getConfigReceiverMixins, { DialogConfig } from '../config-provider/config-receiver';
 
 const name = `${prefix}-dialog`;
+const lockClass = `${prefix}-dialog--lock`;
 
 function GetCSSValue(v: string | number) {
   return Number.isNaN(Number(v)) ? v : `${Number(v)}px`;
@@ -137,17 +139,17 @@ export default defineComponent({
 
   watch: {
     visible(value) {
-      const { scrollWidth } = this;
-      let bodyCssText = 'overflow: hidden;';
       if (value) {
+        const { scrollWidth } = this;
         if (scrollWidth > 0) {
-          bodyCssText += `position: relative;width: calc(100% - ${scrollWidth}px);`;
+          const bodyCssText = `position: relative;width: calc(100% - ${scrollWidth}px);`;
+          document.body.style.cssText = bodyCssText;
         }
-        document.body.style.cssText = bodyCssText;
+        addClass(document.body, lockClass);
       } else {
         document.body.style.cssText = '';
+        removeClass(document.body, lockClass);
       }
-      this.disPreventScrollThrough(value);
       this.addKeyboardEvent(value);
     },
   },
@@ -156,17 +158,10 @@ export default defineComponent({
   },
 
   beforeUnmount() {
-    this.disPreventScrollThrough(false);
     this.addKeyboardEvent(false);
   },
 
   methods: {
-    disPreventScrollThrough(disabled: boolean) {
-      // 防止滚动穿透,modal形态才需要
-      if (this.preventScrollThrough && this.isModal) {
-        document.body.style.overflow = disabled ? 'hidden' : '';
-      }
-    },
     addKeyboardEvent(status: boolean) {
       if (status) {
         document.addEventListener('keydown', this.keyboardEvent);

src/drawer/drawer.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, nextTick } from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue-next';
+import { addClass, removeClass } from '../utils/dom';
 import { ClassName, Styles } from '../common';
 import { prefix } from '../config';
 import { Button as TButton } from '../button';
@@ -16,6 +17,7 @@ import getConfigReceiverMixins, { DrawerConfig } from '../config-provider/config
 type FooterButtonType = 'confirm' | 'cancel';
 
 const name = `${prefix}-drawer`;
+const lockClass = `${prefix}-drawer--lock`;
 
 export default defineComponent({
   ...mixins(ActionMixin, getConfigReceiverMixins<DrawerConfig>('drawer')),
@@ -99,6 +101,16 @@ export default defineComponent({
       },
       immediate: true,
     },
+    visible: {
+      handler(value) {
+        if (value && !this.showInAttachedElement) {
+          this.preventScrollThrough && addClass(document.body, lockClass);
+        } else {
+          this.preventScrollThrough && removeClass(document.body, lockClass);
+        }
+      },
+      immediate: true,
+    },
   },
 
   updated() {

src/drawer/props.ts

@@ -2,7 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-12 19:17:30
+ * updated at 2022-01-04 10:19:08
  * */
 
 import { TdDrawerProps } from './type';
@@ -75,6 +75,11 @@ export default {
       return ['left', 'right', 'top', 'bottom'].includes(val);
     },
   },
+  /** 防止滚动穿透 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
   /** 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative */
   showInAttachedElement: Boolean,
   /** 是否显示遮罩层 */
@@ -91,8 +96,6 @@ export default {
   sizeDraggable: Boolean,
   /** 组件是否可见 */
   visible: Boolean,
-  /** 组件是否可见，非受控属性 */
-  defaultVisible: Boolean,
   /** 抽屉层级，样式默认为 1500 */
   zIndex: {
     type: Number,

src/drawer/type.ts

@@ -2,7 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-12 19:17:30
+ * updated at 2022-01-04 10:19:08
  * */
 
 import { ButtonProps } from '../button';
@@ -70,6 +70,11 @@ export interface TdDrawerProps {
    * @default right
    */
   placement?: 'left' | 'right' | 'top' | 'bottom';
+  /**
+   * 防止滚动穿透
+   * @default true
+   */
+  preventScrollThrough?: boolean;
   /**
    * 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative
    * @default false
@@ -95,11 +100,6 @@ export interface TdDrawerProps {
    * @default false
    */
   visible?: boolean;
-  /**
-   * 组件是否可见，非受控属性
-   * @default false
-   */
-  defaultVisible?: boolean;
   /**
    * 抽屉层级，样式默认为 1500
    */

src/loading/loading.tsx

@@ -11,7 +11,7 @@ import { ClassName, Styles } from '../common';
 const name = `${prefix}-loading`;
 const centerClass = `${prefix}-loading--center`;
 const fullscreenClass = `${prefix}-loading__fullscreen`;
-const lockClass = `${prefix}-loading-lock`;
+const lockClass = `${prefix}-loading--lock`;
 const overlayClass = `${prefix}-loading__overlay`;
 const relativeClass = `${prefix}-loading__parent`;
 const fullClass = `${prefix}-loading--full`;

src/loading/plugin.tsx

@@ -4,7 +4,7 @@ import { prefix } from '../config';
 import { getAttach, removeClass } from '../utils/dom';
 import { TdLoadingProps, LoadingInstance, LoadingMethod } from './type';
 
-const lockClass = `${prefix}-loading-lock`;
+const lockClass = `${prefix}-loading--lock`;
 
 let fullScreenLoadingInstance: LoadingInstance = null;