ming4762
10 months ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with
17 additions and
14 deletions
-
docs/src/components/common-ui/vben-drawer.md
-
docs/src/components/common-ui/vben-modal.md
-
packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
-
packages/@core/ui-kit/popup-ui/src/modal/modal.vue
-
playground/src/views/examples/drawer/base-demo.vue
|
|
|
@ -127,13 +127,14 @@ const [Drawer, drawerApi] = useVbenDrawer({ |
|
|
|
|
|
|
|
除了上面的属性类型包含`slot`,还可以通过插槽来自定义弹窗的内容。 |
|
|
|
|
|
|
|
| 插槽名 | 描述 | |
|
|
|
| -------------- | ------------------- | |
|
|
|
| default | 默认插槽 - 弹窗内容 | |
|
|
|
| prepend-footer | 取消按钮左侧 | |
|
|
|
| append-footer | 取消按钮右侧 | |
|
|
|
| close-icon | 关闭按钮图标 | |
|
|
|
| extra | 额外内容(标题右侧) | |
|
|
|
| 插槽名 | 描述 | |
|
|
|
| -------------- | -------------------------------------------------- | |
|
|
|
| default | 默认插槽 - 弹窗内容 | |
|
|
|
| prepend-footer | 取消按钮左侧 | |
|
|
|
| center-footer | 取消按钮和确认按钮中间(不使用 footer 插槽时有效) | |
|
|
|
| append-footer | 确认按钮右侧 | |
|
|
|
| close-icon | 关闭按钮图标 | |
|
|
|
| extra | 额外内容(标题右侧) | |
|
|
|
|
|
|
|
### drawerApi |
|
|
|
|
|
|
|
|
|
|
|
@ -137,11 +137,12 @@ const [Modal, modalApi] = useVbenModal({ |
|
|
|
|
|
|
|
除了上面的属性类型包含`slot`,还可以通过插槽来自定义弹窗的内容。 |
|
|
|
|
|
|
|
| 插槽名 | 描述 | |
|
|
|
| -------------- | ------------------- | |
|
|
|
| default | 默认插槽 - 弹窗内容 | |
|
|
|
| prepend-footer | 取消按钮左侧 | |
|
|
|
| append-footer | 取消按钮右侧 | |
|
|
|
| 插槽名 | 描述 | |
|
|
|
| -------------- | -------------------------------------------------- | |
|
|
|
| default | 默认插槽 - 弹窗内容 | |
|
|
|
| prepend-footer | 取消按钮左侧 | |
|
|
|
| center-footer | 取消按钮和确认按钮中间(不使用 footer 插槽时有效) | |
|
|
|
| append-footer | 确认按钮右侧 | |
|
|
|
|
|
|
|
### modalApi |
|
|
|
|
|
|
|
|
|
|
|
@ -274,7 +274,7 @@ const getAppendTo = computed(() => { |
|
|
|
{{ cancelText || $t('cancel') }} |
|
|
|
</slot> |
|
|
|
</component> |
|
|
|
|
|
|
|
<slot name="center-footer"></slot> |
|
|
|
<component |
|
|
|
:is="components.PrimaryButton || VbenButton" |
|
|
|
v-if="showConfirmButton" |
|
|
|
|
|
|
|
@ -321,7 +321,7 @@ function handleClosed() { |
|
|
|
{{ cancelText || $t('cancel') }} |
|
|
|
</slot> |
|
|
|
</component> |
|
|
|
|
|
|
|
<slot name="center-footer"></slot> |
|
|
|
<component |
|
|
|
:is="components.PrimaryButton || VbenButton" |
|
|
|
v-if="showConfirmButton" |
|
|
|
|
|
|
|
@ -30,5 +30,6 @@ function lockDrawer() { |
|
|
|
<Button type="primary" @click="lockDrawer">锁定抽屉状态</Button> |
|
|
|
<!-- <template #prepend-footer> slot </template> --> |
|
|
|
<!-- <template #append-footer> prepend slot </template> --> |
|
|
|
<!-- <template #center-footer> center slot </template> --> |
|
|
|
</Drawer> |
|
|
|
</template> |
|
|
|
|