From 656f7b6f480254f31dab2961a6c91d01615acf46 Mon Sep 17 00:00:00 2001 From: mingleicao Date: Sat, 25 Dec 2021 23:05:12 +0800 Subject: [PATCH 1/4] fix: add drawer scroll through --- src/drawer/drawer.tsx | 57 ++++++++++++++++++++++++++----------------- src/drawer/props.ts | 5 ++++ src/drawer/type.ts | 12 +++++++-- 3 files changed, 49 insertions(+), 25 deletions(-) diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index c2014711a..f2dcdb3b9 100644 --- a/src/drawer/drawer.tsx +++ b/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('drawer')).extend({ name: 'TDrawer', @@ -44,11 +46,13 @@ export default mixins(ActionMixin, getConfigReceiverMixins('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('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('d justifyContent: this.placement === 'right' ? 'flex-start' : 'flex-end', }; }, + lockFullscreen(): boolean { + return this.preventScrollThrough; + }, }, watch: { @@ -82,6 +89,16 @@ export default mixins(ActionMixin, getConfigReceiverMixins('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('d onkeydown={this.onKeyDown} v-transfer-dom={this.attach} > - {this.showOverlay &&
} + {this.showOverlay &&
}
{this.header !== false ?
{renderTNodeJSX(this, 'header')}
: null} - {this.closeBtn !== false - ? ( -
- {renderTNodeJSX(this, 'closeBtn', defaultCloseBtn)} -
) - : null} + {this.closeBtn !== false ? ( +
+ {renderTNodeJSX(this, 'closeBtn', defaultCloseBtn)} +
+ ) : null}
{body}
- {this.footer !== false - ?
{renderTNodeJSX(this, 'footer', defaultFooter)}
- : null } + {this.footer !== false ? ( +
{renderTNodeJSX(this, 'footer', defaultFooter)}
+ ) : null}
); @@ -148,13 +164,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d const theme = isCancel ? 'default' : 'primary'; const isApiObject = typeof btnApi === 'object'; return ( - - { (btnApi && typeof btnApi === 'object') ? btnApi.content : btnApi } + + {btnApi && typeof btnApi === 'object' ? btnApi.content : btnApi} ); }, diff --git a/src/drawer/props.ts b/src/drawer/props.ts index 51fbae62a..e93086153 100644 --- a/src/drawer/props.ts +++ b/src/drawer/props.ts @@ -77,6 +77,11 @@ export default { }, /** 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative */ showInAttachedElement: Boolean, + /** 防止滚动穿透 */ + preventScrollThrough: { + type: Boolean, + default: true, + }, /** 是否显示遮罩层 */ showOverlay: { type: Boolean, diff --git a/src/drawer/type.ts b/src/drawer/type.ts index 256bd1008..2588eff73 100644 --- a/src/drawer/type.ts +++ b/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; +} From ae48e1078e59df41ef5debd80226e88323b92005 Mon Sep 17 00:00:00 2001 From: mingleicao Date: Sat, 25 Dec 2021 23:16:29 +0800 Subject: [PATCH 2/4] fix: fix:add drawer scroll through fix #73 --- examples/drawer/drawer.md | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/drawer/drawer.md b/examples/drawer/drawer.md index a92b43f3a..18b67e8f9 100644 --- a/examples/drawer/drawer.md +++ b/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 From 4d2bbdbe1b5872fe9b7c633d15ff42e7a4a5943e Mon Sep 17 00:00:00 2001 From: mingleicao Date: Sun, 26 Dec 2021 15:26:54 +0800 Subject: [PATCH 3/4] fix: add drawer scroll through --- examples/drawer/drawer.md | 3 +-- src/dialog/dialog.tsx | 26 ++++++++++++-------------- src/drawer/drawer.tsx | 9 +++------ src/drawer/props.ts | 6 +++--- src/drawer/type.ts | 12 ++++++------ src/loading/loading.tsx | 37 +++++++++++++------------------------ src/loading/plugin.tsx | 2 +- 7 files changed, 39 insertions(+), 56 deletions(-) diff --git a/examples/drawer/drawer.md b/examples/drawer/drawer.md index 18b67e8f9..fc1edf664 100644 --- a/examples/drawer/drawer.md +++ b/examples/drawer/drawer.md @@ -1,7 +1,6 @@ :: BASE_DOC :: ## API - ### Drawer Props 名称 | 类型 | 默认值 | 说明 | 必传 @@ -19,8 +18,8 @@ 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/blob/develop/src/common.ts) | N mode | String | overlay | 展开方式，有两种：直接展示在内容上方 和 推开内容区域。可选项：overlay/push | N placement | String | right | 抽屉方向。可选项：left/right/top/bottom | N -showInAttachedElement | Boolean | false | 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative | 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 diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx index 5c9a918f1..229fa088c 100644 --- a/src/dialog/dialog.tsx +++ b/src/dialog/dialog.tsx @@ -15,9 +15,11 @@ import mixins from '../utils/mixins'; import getConfigReceiverMixins, { DialogConfig } 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'; const name = `${prefix}-dialog`; +const lockClass = `${prefix}-dialog--lock`; function getCSSValue(v: string | number) { return isNaN(Number(v)) ? v : `${Number(v)}px`; @@ -116,17 +118,17 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d 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); }, }, @@ -135,7 +137,6 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d }, beforeDestroy() { - this.disPreventScrollThrough(false); this.addKeyboardEvent(false); }, @@ -151,12 +152,6 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d }, 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); @@ -233,7 +228,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d getIcon() { const icon = { info: , - warning: , + warning: , danger: , success: , }; @@ -272,7 +267,10 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d style={this.dialogStyle} v-draggable={this.isModeless && this.draggable} > -
{this.getIcon()}{renderTNodeJSX(this, 'header', defaultHeader)}
+
+ {this.getIcon()} + {renderTNodeJSX(this, 'header', defaultHeader)} +
{renderTNodeJSX(this, 'closeBtn', defaultCloseBtn)} diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index f2dcdb3b9..9a01baed0 100644 --- a/src/drawer/drawer.tsx +++ b/src/drawer/drawer.tsx @@ -16,7 +16,7 @@ import ActionMixin from '../dialog/actions'; type FooterButtonType = 'confirm' | 'cancel'; const name = `${prefix}-drawer`; -const lockClass = `${prefix}-drawer-lock`; +const lockClass = `${prefix}-drawer--lock`; export default mixins(ActionMixin, getConfigReceiverMixins('drawer')).extend({ name: 'TDrawer', @@ -77,9 +77,6 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d justifyContent: this.placement === 'right' ? 'flex-start' : 'flex-end', }; }, - lockFullscreen(): boolean { - return this.preventScrollThrough; - }, }, watch: { @@ -92,9 +89,9 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d visible: { handler(value) { if (value && !this.showInAttachedElement) { - this.lockFullscreen && addClass(document.body, lockClass); + this.preventScrollThrough && addClass(document.body, lockClass); } else { - this.lockFullscreen && removeClass(document.body, lockClass); + this.preventScrollThrough && removeClass(document.body, lockClass); } }, immediate: true, diff --git a/src/drawer/props.ts b/src/drawer/props.ts index e93086153..ac687f00c 100644 --- a/src/drawer/props.ts +++ b/src/drawer/props.ts @@ -2,7 +2,7 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-01 14:26:00 + * updated at 2021-12-26 14:30:54 * */ import { TdDrawerProps } from './type'; @@ -75,13 +75,13 @@ export default { return ['left', 'right', 'top', 'bottom'].includes(val); }, }, - /** 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative */ - showInAttachedElement: Boolean, /** 防止滚动穿透 */ preventScrollThrough: { type: Boolean, default: true, }, + /** 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative */ + showInAttachedElement: Boolean, /** 是否显示遮罩层 */ showOverlay: { type: Boolean, diff --git a/src/drawer/type.ts b/src/drawer/type.ts index 2588eff73..608555be4 100644 --- a/src/drawer/type.ts +++ b/src/drawer/type.ts @@ -2,7 +2,7 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-01 14:26:00 + * updated at 2021-12-26 14:30:54 * */ import { ButtonProps } from '../button'; @@ -70,16 +70,16 @@ export interface TdDrawerProps { * @default right */ placement?: 'left' | 'right' | 'top' | 'bottom'; - /** - * 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative - * @default false - */ - showInAttachedElement?: boolean; /** * 防止滚动穿透 * @default true */ preventScrollThrough?: boolean; + /** + * 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative + * @default false + */ + showInAttachedElement?: boolean; /** * 是否显示遮罩层 * @default true diff --git a/src/loading/loading.tsx b/src/loading/loading.tsx index 427f7d0ec..ee4d96458 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`; @@ -67,11 +67,7 @@ export default Vue.extend({ return Boolean(this.text || this.$scopedSlots.text); }, baseClasses(): ClassName { - return [ - centerClass, - SIZE_CLASSNAMES[this.size], - { [inheritColorClass]: this.inheritColor }, - ]; + return [centerClass, SIZE_CLASSNAMES[this.size], { [inheritColorClass]: this.inheritColor }]; }, hasContent(): boolean { return Boolean(this.default || this.$scopedSlots.default || this.content || this.$scopedSlots.content); @@ -128,13 +124,10 @@ export default Vue.extend({ if (this.fullscreen) { if (!this.loading) return null; return ( -
+
- {indicator}{text} + {indicator} + {text}
); @@ -146,11 +139,9 @@ export default Vue.extend({
{renderContent(this, 'default', 'content')} {this.showWrapLoading && ( -
- {indicator}{text} +
+ {indicator} + {text}
)}
@@ -160,12 +151,9 @@ export default Vue.extend({ // transfer parent node if (this.attach) { return ( -
- {indicator}{text} +
+ {indicator} + {text}
); } @@ -173,7 +161,8 @@ export default Vue.extend({ // Normal Loading without overlay or content return (
- {indicator}{text} + {indicator} + {text}
); }, diff --git a/src/loading/plugin.tsx b/src/loading/plugin.tsx index a0c3d18a5..b0ca11beb 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; From ff63c73763f3972ecacb1c3b44af9768a437c89b Mon Sep 17 00:00:00 2001 From: mingleicao Date: Mon, 27 Dec 2021 14:28:19 +0800 Subject: [PATCH 4/4] feat: merge --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index c72d76b9e..e4683b98c 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit c72d76b9e90c10d66fe573936901764964a46d0f +Subproject commit e4683b98ce4e673efeaabd4af3d241884e97bd16