feat(components): [el-drawer] add footer slot (#5404)

* feat: [el-drawer]add footer slot

* feat(components): [el-drawer]add footer slot

* feat(components): [el-drawer]add cancel and confirm function
This commit is contained in:
Alan Wang 2022-01-17 14:58:06 +08:00 committed by GitHub
parent b57cfd8c6e
commit 984e0c2578
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 5 deletions

View File

@ -42,7 +42,7 @@ Since v-model is natively supported for all components, `visible.sync` has been
Callout a temporary drawer, from multiple direction
:::demo You must set `model-value` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
:::demo You must set `model-value` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has three parts: `title` & `body` & `footer`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
drawer/basic-usage
@ -116,9 +116,10 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
## Drawer Slots
| Name | Description |
| ----- | -------------------- |
| ------ | --------------------- |
| — | Drawer's Content |
| title | Drawer Title Section |
| footer | Drawer footer Section |
## Drawer Methods

View File

@ -9,6 +9,9 @@
<el-button type="primary" style="margin-left: 16px" @click="drawer = true">
open
</el-button>
<el-button type="primary" style="margin-left: 16px" @click="drawer2 = true">
with footer
</el-button>
<el-drawer
v-model="drawer"
@ -18,6 +21,27 @@
>
<span>Hi, there!</span>
</el-drawer>
<el-drawer v-model="drawer2" :direction="direction">
<template #title>
<h4>set title by slot</h4>
</template>
<template #default>
<div>
<el-radio v-model="radio1" label="Option 1" size="large"
>Option 1</el-radio
>
<el-radio v-model="radio1" label="Option 2" size="large"
>Option 2</el-radio
>
</div>
</template>
<template #footer>
<div style="flex: auto">
<el-button @click="cancelClick">cancel</el-button>
<el-button type="primary" @click="confirmClick">confirm</el-button>
</div>
</template>
</el-drawer>
</template>
<script lang="ts" setup>
@ -25,7 +49,9 @@ import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
const drawer = ref(false)
const drawer2 = ref(false)
const direction = ref('rtl')
const radio1 = ref('Option 1')
const handleClose = (done: () => void) => {
ElMessageBox.confirm('Are you sure you want to close this?')
.then(() => {
@ -35,4 +61,16 @@ const handleClose = (done: () => void) => {
// catch error
})
}
function cancelClick() {
drawer2.value = false
}
function confirmClick() {
ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
.then(() => {
drawer2.value = false
})
.catch(() => {
// catch error
})
}
</script>

View File

@ -51,6 +51,9 @@
<slot></slot>
</section>
</template>
<div v-if="$slots.footer" class="el-drawer__footer">
<slot name="footer"></slot>
</div>
</div>
</el-overlay>
</transition>

View File

@ -45,6 +45,12 @@ $directions: rtl, ltr, ttb, btt;
font-size: 1rem;
}
@include e(footer) {
padding: var(--el-drawer-padding-primary);
padding-top: 10px;
text-align: right;
}
&__close-btn {
border: none;
cursor: pointer;