mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-03 03:38:41 +08:00
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:
parent
b57cfd8c6e
commit
984e0c2578
@ -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
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user