Skip to content

Commit

Permalink
docs: update drawer docs
Browse files Browse the repository at this point in the history
  • Loading branch information
chaishi committed Mar 10, 2024
1 parent c09906d commit 23e581b
Showing 1 changed file with 11 additions and 8 deletions.
19 changes: 11 additions & 8 deletions packages/products/tdesign-vue-next/src/drawer/drawer.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,18 @@
如果您不确定问题是否是由该规则引起的,或者确定该规则不是问题的根本原因,请在 `GitHub` 上提出一个 `issue`,并提供可以重现问题的代码。这将有助于我们更好地了解您的问题并提供更好的帮助。

## API

### Drawer Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
attach | String / Function | '' | 抽屉挂载的节点,默认挂在组件本身的位置。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
attach | String / Function | - | 抽屉挂载的节点,默认挂在组件本身的位置。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
body | String / Slot / Function | - | 抽屉内容。TS 类型:`string \| TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
cancelBtn | String / Object / Slot / Function | '' | 取消按钮,可自定义。值为 null 则不显示取消按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制取消事件。TS 类型:`FooterButton` | N
cancelBtn | String / Object / Slot / Function | - | 取消按钮,可自定义。值为 null 则不显示取消按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制取消事件。TS 类型:`FooterButton` | N
closeBtn | String / Boolean / Slot / Function | - | 关闭按钮,可以自定义。值为 true 显示默认关闭按钮,值为 false 不显示关闭按钮。值类型为 string 则直接显示值,如:“关闭”。值类型为 TNode,则表示呈现自定义按钮示例。TS 类型:`string \| boolean \| TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发抽屉关闭事件 | N
closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制确认事件。TS 类型:`FooterButton` `type FooterButton = string \| ButtonProps \| TNode`[Button API Documents](./button?tab=api)[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/drawer/type.ts) | N
confirmBtn | String / Object / Slot / Function | - | 确认按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制确认事件。TS 类型:`FooterButton` `type FooterButton = string \| ButtonProps \| TNode`[Button API Documents](./button?tab=api)[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/drawer/type.ts) | N
default | String / Slot / Function | - | 抽屉内容,同 body。TS 类型:`string \| TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
destroyOnClose | Boolean | false | 抽屉关闭时是否销毁节点 | N
footer | Boolean / Slot / Function | true | 底部操作栏,默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮,值为 false 或 null 不显示任何内容,值类型为 TNode 表示自定义底部内容。TS 类型:`boolean \| TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
Expand All @@ -58,7 +59,7 @@ 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
sizeDraggable | Boolean / Object | false | 抽屉大小可拖拽调整,横向抽屉调整宽度,纵向抽屉调整高度`sizeDraggable.max``sizeDraggable.min` 用于控制拖拽尺寸大小限制。TS 类型:`boolean \| SizeDragLimit` `interface SizeDragLimit { max: number, min: number }`[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/drawer/type.ts) | N
visible | Boolean | false | 组件是否可见 | N
zIndex | Number | - | 抽屉层级,样式默认为 1500 | N
onCancel | Function | | TS 类型:`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在,点击“取消”按钮时触发,同时触发关闭事件 | N
Expand All @@ -67,6 +68,7 @@ onCloseBtnClick | Function | | TS 类型:`(context: { e: MouseEvent }) => voi
onConfirm | Function | | TS 类型:`(context: { e: MouseEvent }) => void`<br/>如果“确认”按钮存在,则点击“确认”按钮时触发 | N
onEscKeydown | Function | | TS 类型:`(context: { e: KeyboardEvent }) => void`<br/>按下 ESC 键时触发 | N
onOverlayClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`<br/>如果蒙层存在,点击蒙层时触发 | N
onSizeDragEnd | Function | | TS 类型:`(context: { e: MouseEvent; size: number }) => void`<br/>抽屉大小拖拽结束时触发,事件参数 `size` 在横向抽屉中表示宽度,在纵向抽屉中表示高度 | N

### Drawer Events

Expand All @@ -78,15 +80,16 @@ close-btn-click | `(context: { e: MouseEvent })` | 如果关闭按钮存在,
confirm | `(context: { e: MouseEvent })` | 如果“确认”按钮存在,则点击“确认”按钮时触发
esc-keydown | `(context: { e: KeyboardEvent })` | 按下 ESC 键时触发
overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在,点击蒙层时触发
size-drag-end | `(context: { e: MouseEvent; size: number })` | 抽屉大小拖拽结束时触发,事件参数 `size` 在横向抽屉中表示宽度,在纵向抽屉中表示高度

### DrawerOptions

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
attach | String / Function | 'body' | 抽屉挂载的节点。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
className | String | - | 抽屉类名,示例:'t-class-drawer-first t-class-drawer-second' | N
style | String / Object | - | 弹框 style 属性,输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型:`string \| Styles`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
`Omit<DrawerProps, 'attach'>` | \- | - | 继承 `Omit<DrawerProps, 'attach'>` 中的全部 API | N
`Omit<DrawerProps, 'attach'>` | \- | - | 继承 `Omit<DrawerProps, 'attach'>` 中的全部属性 | N

### DrawerInstance

Expand All @@ -101,6 +104,6 @@ update | `(props: DrawerOptions)` | \- | 更新抽屉内容

同时也支持 `this.$drawer`

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
options | \- | - | TS 类型:`DrawerOptions`

0 comments on commit 23e581b

Please sign in to comment.