javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): update Dialog (#19200)

Browse Source 
* docs(components): update Dialog

add fullscreen, modal, events, slot

* docs(components): update text

---------

Co-authored-by: btea <2356281422@qq.com>
This commit is contained in:
VisualYuki
2024-12-14 05:17:41 +03:00
committed by GitHub
parent 6ea5358acd
commit 63cb03cf4e
4 changed files with 139 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
docs/examples/dialog/events.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<el-button plain @click="dialogVisible = true">
Open the event Dialog
</el-button>
<el-dialog
v-model="dialogVisible"
modal-class="overide-animation"
:before-close="
(doneFn) => {
console.log('before-close'), doneFn()
}
"
@open="console.log('open')"
@open-auto-focus="console.log('open-auto-focus')"
@opened="console.log('opened')"
@close="console.log('close')"
@close-auto-focus="console.log('close-auto-focus')"
@closed="console.log('closed')"
>
<span>It's a event Dialog</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">
Confirm
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>
<style lang="scss">
.dialog-fade-enter-active {
animation: modal-fade-in 2s;
.el-overlay-dialog {
animation: dialog-fade-in 2s;
}
}
.dialog-fade-leave-active {
animation: modal-fade-out 2s;
.el-overlay-dialog {
animation: dialog-fade-out 2s;
}
}
</style>

29
docs/examples/dialog/fullscreen.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<el-button plain @click="dialogVisible = true">
Open the fullscreen Dialog
</el-button>
<el-dialog
v-model="dialogVisible"
fullscreen
top="40vh"
width="70%"
draggable
>
<span>It's a fullscreen Dialog</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">
Confirm
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>

23
docs/examples/dialog/modal.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<el-button plain @click="dialogVisible = true">
Open the modal Dialog
</el-button>
<el-dialog v-model="dialogVisible" :modal="false">
<span>It's a modal Dialog</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">
Confirm
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>