Skip to content

feat(Drawer): implemented lazy #3598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RSS1102 wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

feat(Drawer): implemented lazy #3598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
80f93d7
feat(Drawer): implemented lazy
RSS1102 Apr 25, 2025
27d0c05
feat(Drawer): implemented lazy
RSS1102 May 13, 2025
b9657cd
Merge branch 'develop' into rss1102/feat/drawer/lazy
RSS1102 May 13, 2025
bd839dd
chore: update subproject commit reference
RSS1102 May 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 3 files
+9 −6 docs/mobile/theme.en-US.md
+6 −4 docs/mobile/theme.md
+1 −0 style/web/components/cascader/_index.less
1 change: 1 addition & 0 deletions src/drawer/drawer.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ destroyOnClose | Boolean | false | \- | N
drawerClassName | String | - | \- | N
footer | Boolean / Slot / Function | true | Typescript: `boolean \| TNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
header | String / Boolean / Slot / Function | true | Typescript: `string \| boolean \| TNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
lazy | Boolean | false | Enable Drawer lazy loading, the contents of the Drawer are not rendered when enable | N
mode | String | overlay | options: overlay/push | N
placement | String | right | options: left/right/top/bottom | N
preventScrollThrough | Boolean | true | \- | N
Expand Down
1 change: 1 addition & 0 deletions src/drawer/drawer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ destroyOnClose | Boolean | false | 抽屉关闭时是否销毁节点 | N
drawerClassName | String | - | 抽屉元素类名。 | N
footer | Boolean / Slot / Function | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 或 null 不显示任何内容，值类型为 TNode 表示自定义底部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
header | String / Boolean / Slot / Function | true | 头部内容。值为 true 显示空白头部，值为 false 不显示头部，值类型为 string 则直接显示值，值类型为 TNode 表示自定义头部内容。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
lazy | Boolean | false | 是否启用抽屉懒加载，启用时抽屉的内容不渲染 | N
mode | String | overlay | 展开方式，有两种：直接展示在内容上方 和 推开内容区域。可选项：overlay/push | N
placement | String | right | 抽屉方向。可选项：left/right/top/bottom | N
preventScrollThrough | Boolean | true | 防止滚动穿透 | N
Expand Down
4 changes: 3 additions & 1 deletion src/drawer/drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export default mixins(
animationEnd: true,
styleTimer: null,
styleEl: null,
isMounted: false,
};
},
computed: {
Expand Down Expand Up @@ -136,6 +137,7 @@ export default mixins(
visible: {
handler(val) {
if (val) {
this.isMounted = true;
this.$nextTick(() => {
(this.$refs.drawerContainer as HTMLDivElement)?.focus?.();
});
Expand Down Expand Up @@ -172,7 +174,7 @@ export default mixins(
},

render() {
if (this.destroyOnClose && !this.visible && this.animationEnd) return null;
if ((this.destroyOnClose && !this.visible && this.animationEnd) || (!this.isMounted && this.lazy)) return null;

const { CloseIcon } = this.useGlobalIcon({
CloseIcon: TdCloseIcon,
Expand Down
2 changes: 2 additions & 0 deletions src/drawer/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ export default {
type: [String, Boolean, Function] as PropType<TdDrawerProps['header']>,
default: true,
},
/** 是否启用抽屉懒加载，启用时抽屉的内容不渲染 */
lazy: Boolean,
/** 展开方式，有两种：直接展示在内容上方 和 推开内容区域 */
mode: {
type: String as PropType<TdDrawerProps['mode']>,
Expand Down
5 changes: 5 additions & 0 deletions src/drawer/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,11 @@ export interface TdDrawerProps {
* @default true
*/
header?: string | boolean | TNode;
/**
* 是否启用抽屉懒加载，启用时抽屉的内容不渲染
* @default false
*/
lazy?: boolean;
/**
* 展开方式，有两种：直接展示在内容上方 和 推开内容区域
* @default overlay
Expand Down