mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-14 18:11:48 +08:00
feat(components): [dialog] Dialog can drag overflow the viewport (#15643)
* style(components): [dialog] Modify dialog style and docs * chore: update * feat(components): [dialog] add overflow prop * feat(components): update
This commit is contained in:
@ -1,22 +1,23 @@
|
||||
<template>
|
||||
<el-button text @click="outerVisible = true">
|
||||
open the outer Dialog
|
||||
<el-button plain @click="outerVisible = true">
|
||||
Open the outer Dialog
|
||||
</el-button>
|
||||
|
||||
<el-dialog v-model="outerVisible" title="Outer Dialog">
|
||||
<template #default>
|
||||
<el-dialog
|
||||
v-model="innerVisible"
|
||||
width="30%"
|
||||
title="Inner Dialog"
|
||||
append-to-body
|
||||
/>
|
||||
</template>
|
||||
<el-dialog v-model="outerVisible" title="Outer Dialog" width="800">
|
||||
<span>This is the outer Dialog</span>
|
||||
<el-dialog
|
||||
v-model="innerVisible"
|
||||
width="500"
|
||||
title="Inner Dialog"
|
||||
append-to-body
|
||||
>
|
||||
<span>This is the inner Dialog</span>
|
||||
</el-dialog>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="outerVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="innerVisible = true">
|
||||
open the inner Dialog
|
||||
Open the inner Dialog
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
@ -29,8 +30,3 @@ import { ref } from 'vue'
|
||||
const outerVisible = ref(false)
|
||||
const innerVisible = ref(false)
|
||||
</script>
|
||||
<style scoped>
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user