Browse Source

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

pull/5960/head
ming4762 10 months ago
committed by GitHub
parent
commit
c7e6210c8d
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 15
      docs/src/components/common-ui/vben-drawer.md
  2. 11
      docs/src/components/common-ui/vben-modal.md
  3. 2
      packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
  4. 2
      packages/@core/ui-kit/popup-ui/src/modal/modal.vue
  5. 1
      playground/src/views/examples/drawer/base-demo.vue

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

@ -127,13 +127,14 @@ const [Drawer, drawerApi] = useVbenDrawer({
除了上面的属性类型包含`slot`,还可以通过插槽来自定义弹窗的内容。 除了上面的属性类型包含`slot`,还可以通过插槽来自定义弹窗的内容。
| 插槽名 | 描述 | | 插槽名 | 描述 |
| -------------- | ------------------- | | -------------- | -------------------------------------------------- |
| default | 默认插槽 - 弹窗内容 | | default | 默认插槽 - 弹窗内容 |
| prepend-footer | 取消按钮左侧 | | prepend-footer | 取消按钮左侧 |
| append-footer | 取消按钮右侧 | | center-footer | 取消按钮和确认按钮中间(不使用 footer 插槽时有效) |
| close-icon | 关闭按钮图标 | | append-footer | 确认按钮右侧 |
| extra | 额外内容(标题右侧) | | close-icon | 关闭按钮图标 |
| extra | 额外内容(标题右侧) |
### drawerApi ### drawerApi

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

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

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

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

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

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

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

@ -30,5 +30,6 @@ function lockDrawer() {
<Button type="primary" @click="lockDrawer">锁定抽屉状态</Button> <Button type="primary" @click="lockDrawer">锁定抽屉状态</Button>
<!-- <template #prepend-footer> slot </template> --> <!-- <template #prepend-footer> slot </template> -->
<!-- <template #append-footer> prepend slot </template> --> <!-- <template #append-footer> prepend slot </template> -->
<!-- <template #center-footer> center slot </template> -->
</Drawer> </Drawer>
</template> </template>

Loading…
Cancel
Save