diff --git a/examples/drawer/drawer.md b/examples/drawer/drawer.md index db6c7754f2..0e795df17a 100644 --- a/examples/drawer/drawer.md +++ b/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 diff --git a/src/_common b/src/_common index abfb408193..6ac6fb85d4 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit abfb40819340dbb215ef0b175d6d49f669a02971 +Subproject commit 6ac6fb85d429abe38a06d75a7c9283cc14161d24 diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx index 58dc7d3717..0a10bf7f22 100644 --- a/src/dialog/dialog.tsx +++ b/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); diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index 84f47340e3..50a2cd8e3f 100644 --- a/src/drawer/drawer.tsx +++ b/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('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() { diff --git a/src/drawer/props.ts b/src/drawer/props.ts index 90f34ef0fa..3394febdc8 100644 --- a/src/drawer/props.ts +++ b/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, diff --git a/src/drawer/type.ts b/src/drawer/type.ts index dbcbbdf5c7..b85c194d41 100644 --- a/src/drawer/type.ts +++ b/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 */ diff --git a/src/loading/loading.tsx b/src/loading/loading.tsx index 31966401e5..4585c160c0 100644 --- a/src/loading/loading.tsx +++ b/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`; diff --git a/src/loading/plugin.tsx b/src/loading/plugin.tsx index 72f6f6cc98..8eb761b64d 100644 --- a/src/loading/plugin.tsx +++ b/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;