docs: update vben-drawer.md (#6478)
* docs: update vben-drawer.md * docs: update vben-drawer.md --------- Co-authored-by: Jin Mao <50581550+jinmao88@users.noreply.github.com>pull/168/head^2
xue-jn
GitHub
parent
2f7de243f6
commit
b333fd676d
|
|
@ -22,7 +22,7 @@ outline: deep
|
||||||
|
|
||||||
## 基础用法
|
## 基础用法
|
||||||
|
|
||||||
使用 `useVbenDrawer` 创建最基础的模态框。
|
使用 `useVbenDrawer` 创建最基础的抽屉。
|
||||||
|
|
||||||
<DemoPreview dir="demos/vben-drawer/basic" />
|
<DemoPreview dir="demos/vben-drawer/basic" />
|
||||||
|
|
||||||
|
|
@ -52,7 +52,7 @@ Drawer 内的内容一般业务中，会比较复杂，所以我们可以将 dra
|
||||||
|
|
||||||
::: info 注意
|
::: info 注意
|
||||||
|
|
||||||
- `VbenDrawer` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenDrawer参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
|
- `VbenDrawer` 组件对于参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenDrawer参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
|
||||||
- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenDrawer`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onConfirm`，那么以内部的 `onConfirm` 为准。`onOpenChange`事件除外，内外都会触发。
|
- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenDrawer`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onConfirm`，那么以内部的 `onConfirm` 为准。`onOpenChange`事件除外，内外都会触发。
|
||||||
- 使用了`connectedComponent`参数时，可以配置`destroyOnClose`属性来决定当关闭弹窗时，是否要销毁`connectedComponent`组件（重新创建`connectedComponent`组件，这将会把其内部所有的变量、状态、数据等恢复到初始状态。）。
|
- 使用了`connectedComponent`参数时，可以配置`destroyOnClose`属性来决定当关闭弹窗时，是否要销毁`connectedComponent`组件（重新创建`connectedComponent`组件，这将会把其内部所有的变量、状态、数据等恢复到初始状态。）。
|
||||||
- 如果抽屉的默认行为不符合你的预期，可以在`src\bootstrap.ts`中修改`setDefaultDrawerProps`的参数来设置默认的属性，如默认隐藏全屏按钮，修改默认ZIndex等。
|
- 如果抽屉的默认行为不符合你的预期，可以在`src\bootstrap.ts`中修改`setDefaultDrawerProps`的参数来设置默认的属性，如默认隐藏全屏按钮，修改默认ZIndex等。
|
||||||
|
|
@ -77,7 +77,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
|
||||||
| 属性名 | 描述 | 类型 | 默认值 |
|
| 属性名 | 描述 | 类型 | 默认值 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| appendToMain | 是否挂载到内容区域（默认挂载到body） | `boolean` | `false` |
|
| appendToMain | 是否挂载到内容区域（默认挂载到body） | `boolean` | `false` |
|
||||||
| connectedComponent | 连接另一个Modal组件 | `Component` | - |
|
| connectedComponent | 连接另一个Drawer组件 | `Component` | - |
|
||||||
| destroyOnClose | 关闭时销毁 | `boolean` | `false` |
|
| destroyOnClose | 关闭时销毁 | `boolean` | `false` |
|
||||||
| title | 标题 | `string\|slot` | - |
|
| title | 标题 | `string\|slot` | - |
|
||||||
| titleTooltip | 标题提示信息 | `string\|slot` | - |
|
| titleTooltip | 标题提示信息 | `string\|slot` | - |
|
||||||
|
|
@ -96,7 +96,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
|
||||||
| cancelText | 取消按钮文本 | `string\|slot` | `取消` |
|
| cancelText | 取消按钮文本 | `string\|slot` | `取消` |
|
||||||
| placement | 抽屉弹出位置 | `'left'\|'right'\|'top'\|'bottom'` | `right` |
|
| placement | 抽屉弹出位置 | `'left'\|'right'\|'top'\|'bottom'` | `right` |
|
||||||
| showCancelButton | 显示取消按钮 | `boolean` | `true` |
|
| showCancelButton | 显示取消按钮 | `boolean` | `true` |
|
||||||
| showConfirmButton | 显示确认按钮文本 | `boolean` | `true` |
|
| showConfirmButton | 显示确认按钮 | `boolean` | `true` |
|
||||||
| class | modal的class，宽度通过这个配置 | `string` | - |
|
| class | modal的class，宽度通过这个配置 | `string` | - |
|
||||||
| contentClass | modal内容区域的class | `string` | - |
|
| contentClass | modal内容区域的class | `string` | - |
|
||||||
| footerClass | modal底部区域的class | `string` | - |
|
| footerClass | modal底部区域的class | `string` | - |
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue