fix drawer scroll through

examples/drawer/drawer.md

@@ -20,6 +20,7 @@ header | String / Boolean / Slot / Function | undefined | 头部内容。值为
 mode | String | overlay | 展开方式，有两种：直接展示在内容上方 和 推开内容区域。可选项：overlay/push | N
 placement | String | right | 抽屉方向。可选项：left/right/top/bottom | N
 showInAttachedElement | Boolean | false | 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative | N
+preventScrollThrough | Boolean | true | 防止滚动穿透 | N
 showOverlay | Boolean | true | 是否显示遮罩层 | N
 size | String | small | 尺寸，支持 'small', 'medium', 'large'，'35px', '30%',  '3em' 等。纵向抽屉调整的是抽屉宽度，横向抽屉调整的是抽屉高度 | N
 sizeDraggable | Boolean | false | 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度 | N

src/drawer/drawer.tsx

@@ -9,12 +9,14 @@ import mixins from '../utils/mixins';
 import getConfigReceiverMixins, { DrawerConfig } from '../config-provider/config-receiver';
 import TransferDom from '../utils/transfer-dom';
 import { emitEvent } from '../utils/event';
+import { addClass, removeClass } from '../utils/dom';
 import { ClassName, Styles } from '../common';
 import ActionMixin from '../dialog/actions';
 
 type FooterButtonType = 'confirm' | 'cancel';
 
 const name = `${prefix}-drawer`;
+const lockClass = `${prefix}-drawer-lock`;
 
 export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('drawer')).extend({
   name: 'TDrawer',
@@ -44,11 +46,13 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
     },
     sizeValue(): string {
       const defaultSize = isNaN(Number(this.size)) ? this.size : `${this.size}px`;
-      return {
-        small: '300px',
-        medium: '500px',
-        large: '760px',
-      }[this.size] || defaultSize;
+      return (
+        {
+          small: '300px',
+          medium: '500px',
+          large: '760px',
+        }[this.size] || defaultSize
+      );
     },
     wrapperStyles(): Styles {
       return {
@@ -62,7 +66,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
       return [`${name}__content-wrapper`, `${name}__content-wrapper--${this.placement}`];
     },
     parentNode(): HTMLElement {
-      return this.$el && this.$el.parentNode as HTMLElement;
+      return this.$el && (this.$el.parentNode as HTMLElement);
     },
     modeAndPlacement(): string {
       return [this.mode, this.placement].join();
@@ -73,6 +77,9 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
         justifyContent: this.placement === 'right' ? 'flex-start' : 'flex-end',
       };
     },
+    lockFullscreen(): boolean {
+      return this.preventScrollThrough;
+    },
   },
 
   watch: {
@@ -82,6 +89,16 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
       },
       immediate: true,
     },
+    visible: {
+      handler(value) {
+        if (value && !this.showInAttachedElement) {
+          this.lockFullscreen && addClass(document.body, lockClass);
+        } else {
+          this.lockFullscreen && removeClass(document.body, lockClass);
+        }
+      },
+      immediate: true,
+    },
   },
 
   updated() {
@@ -100,19 +117,18 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
         onkeydown={this.onKeyDown}
         v-transfer-dom={this.attach}
       >
-        {this.showOverlay && <div class={`${name}__mask`} onClick={this.handleWrapperClick}/>}
+        {this.showOverlay && <div class={`${name}__mask`} onClick={this.handleWrapperClick} />}
         <div class={this.wrapperClasses} style={this.wrapperStyles}>
           {this.header !== false ? <div class={`${name}__header`}>{renderTNodeJSX(this, 'header')}</div> : null}
-          {this.closeBtn !== false
-            ? (
-              <div class={`${name}__close-btn`} onClick={this.handleCloseBtnClick}>
-                {renderTNodeJSX(this, 'closeBtn', defaultCloseBtn)}
-              </div>)
-            : null}
+          {this.closeBtn !== false ? (
+            <div class={`${name}__close-btn`} onClick={this.handleCloseBtnClick}>
+              {renderTNodeJSX(this, 'closeBtn', defaultCloseBtn)}
+            </div>
+          ) : null}
           <div class={`${name}__body`}>{body}</div>
-          {this.footer !== false
-            ? <div class={`${name}__footer`}>{renderTNodeJSX(this, 'footer', defaultFooter)}</div>
-            : null }
+          {this.footer !== false ? (
+            <div class={`${name}__footer`}>{renderTNodeJSX(this, 'footer', defaultFooter)}</div>
+          ) : null}
         </div>
       </div>
     );
@@ -148,13 +164,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
       const theme = isCancel ? 'default' : 'primary';
       const isApiObject = typeof btnApi === 'object';
       return (
-        <t-button
-          theme={theme}
-          onClick={clickAction}
-          props={isApiObject ? btnApi : {}}
-          class={`${name}-${btnType}`}
-        >
-          { (btnApi && typeof btnApi === 'object') ? btnApi.content : btnApi }
+        <t-button theme={theme} onClick={clickAction} props={isApiObject ? btnApi : {}} class={`${name}-${btnType}`}>
+          {btnApi && typeof btnApi === 'object' ? btnApi.content : btnApi}
         </t-button>
       );
     },

src/drawer/props.ts

@@ -77,6 +77,11 @@ export default {
   },
   /** 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative */
   showInAttachedElement: Boolean,
+  /** 防止滚动穿透 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否显示遮罩层 */
   showOverlay: {
     type: Boolean,

src/drawer/type.ts

@@ -75,6 +75,11 @@ export interface TdDrawerProps {
    * @default false
    */
   showInAttachedElement?: boolean;
+  /**
+   * 防止滚动穿透
+   * @default true
+   */
+  preventScrollThrough?: boolean;
   /**
    * 是否显示遮罩层
    * @default true
@@ -128,10 +133,13 @@ export interface TdDrawerProps {
    * 如果蒙层存在，点击蒙层时触发
    */
   onOverlayClick?: (context: { e: MouseEvent }) => void;
-};
+}
 
 export type FooterButton = string | ButtonProps | TNode;
 
 export type DrawerEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay';
 
-export interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent | KeyboardEvent };
+export interface DrawerCloseContext {
+  trigger: DrawerEventSource;
+  e: MouseEvent | KeyboardEvent;
+}