Skip to content

Commit c7e6210

Browse files
authored
feat: modal&drawer support center-footer slot (#5956)
1 parent d864085 commit c7e6210

File tree

5 files changed

+17
-14
lines changed

5 files changed

+17
-14
lines changed

docs/src/components/common-ui/vben-drawer.md

+8-7
Original file line numberDiff line numberDiff line change
@@ -127,13 +127,14 @@ const [Drawer, drawerApi] = useVbenDrawer({
127127

128128
除了上面的属性类型包含`slot`,还可以通过插槽来自定义弹窗的内容。
129129

130-
| 插槽名 | 描述 |
131-
| -------------- | ------------------- |
132-
| default | 默认插槽 - 弹窗内容 |
133-
| prepend-footer | 取消按钮左侧 |
134-
| append-footer | 取消按钮右侧 |
135-
| close-icon | 关闭按钮图标 |
136-
| extra | 额外内容(标题右侧) |
130+
| 插槽名 | 描述 |
131+
| -------------- | -------------------------------------------------- |
132+
| default | 默认插槽 - 弹窗内容 |
133+
| prepend-footer | 取消按钮左侧 |
134+
| center-footer | 取消按钮和确认按钮中间(不使用 footer 插槽时有效) |
135+
| append-footer | 确认按钮右侧 |
136+
| close-icon | 关闭按钮图标 |
137+
| extra | 额外内容(标题右侧) |
137138

138139
### drawerApi
139140

docs/src/components/common-ui/vben-modal.md

+6-5
Original file line numberDiff line numberDiff line change
@@ -137,11 +137,12 @@ const [Modal, modalApi] = useVbenModal({
137137

138138
除了上面的属性类型包含`slot`,还可以通过插槽来自定义弹窗的内容。
139139

140-
| 插槽名 | 描述 |
141-
| -------------- | ------------------- |
142-
| default | 默认插槽 - 弹窗内容 |
143-
| prepend-footer | 取消按钮左侧 |
144-
| append-footer | 取消按钮右侧 |
140+
| 插槽名 | 描述 |
141+
| -------------- | -------------------------------------------------- |
142+
| default | 默认插槽 - 弹窗内容 |
143+
| prepend-footer | 取消按钮左侧 |
144+
| center-footer | 取消按钮和确认按钮中间(不使用 footer 插槽时有效) |
145+
| append-footer | 确认按钮右侧 |
145146

146147
### modalApi
147148

packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ const getAppendTo = computed(() => {
274274
{{ cancelText || $t('cancel') }}
275275
</slot>
276276
</component>
277-
277+
<slot name="center-footer"></slot>
278278
<component
279279
:is="components.PrimaryButton || VbenButton"
280280
v-if="showConfirmButton"

packages/@core/ui-kit/popup-ui/src/modal/modal.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ function handleClosed() {
321321
{{ cancelText || $t('cancel') }}
322322
</slot>
323323
</component>
324-
324+
<slot name="center-footer"></slot>
325325
<component
326326
:is="components.PrimaryButton || VbenButton"
327327
v-if="showConfirmButton"

playground/src/views/examples/drawer/base-demo.vue

+1
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,6 @@ function lockDrawer() {
3030
<Button type="primary" @click="lockDrawer">锁定抽屉状态</Button>
3131
<!-- <template #prepend-footer> slot </template> -->
3232
<!-- <template #append-footer> prepend slot </template> -->
33+
<!-- <template #center-footer> center slot </template> -->
3334
</Drawer>
3435
</template>

0 commit comments

Comments
 (0)