feat: modal&drawer support center-footer slot (vbenjs#5956)

Author: ming4762

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

@@ -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
 

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

@@ -137,11 +137,12 @@ const [Modal, modalApi] = useVbenModal({
 
 除了上面的属性类型包含`slot`，还可以通过插槽来自定义弹窗的内容。
 
-| 插槽名         | 描述                |
-| -------------- | ------------------- |
-| default        | 默认插槽 - 弹窗内容 |
-| prepend-footer | 取消按钮左侧        |
-| append-footer  | 取消按钮右侧        |
+| 插槽名         | 描述                                               |
+| -------------- | -------------------------------------------------- |
+| default        | 默认插槽 - 弹窗内容                                |
+| prepend-footer | 取消按钮左侧                                       |
+| center-footer  | 取消按钮和确认按钮中间（不使用 footer 插槽时有效） |
+| append-footer  | 确认按钮右侧                                       |
 
 ### modalApi
 

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

@@ -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"

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

@@ -321,7 +321,7 @@ function handleClosed() {
               {{ cancelText || $t('cancel') }}
             </slot>
           </component>
-
+          <slot name="center-footer"></slot>
           <component
             :is="components.PrimaryButton || VbenButton"
             v-if="showConfirmButton"

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

@@ -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>