<template>
    <el-button plain @click="centerDialogVisible = true">
        Click to open the Dialog
    </el-button>

    <el-dialog v-model="centerDialogVisible"
               title="Warning"
               width="500"
               align-center
               custom-class="my-tiny-dialog">

        <span>Open the dialog from the center from the screen</span>

        <template #footer>
                
            <el-button type="danger" @click="centerDialogVisible = false">
                    Confirm
            </el-button>
            
            <el-button @click="centerDialogVisible = false">Cancel</el-button>
            
        </template>
    </el-dialog>
</template>

<script setup>
    import { ref } from 'vue'

    const centerDialogVisible = ref(false)

</script>

<style>
    .my-tiny-dialog .el-dialog__header {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 0px;
        margin-bottom: 0px;
        height: auto; /* 也調整你想要的高度 */
    }
    
    .my-tiny-dialog .el-dialog__body {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 0px;
        margin-bottom: 0px;        
        /*Element Plus 的 .el-dialog__body 是 高度自動撐開內容*/
    }

    .my-tiny-dialog .el-dialog__footer {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 10px;
        padding-right: 30px;
        margin-top: 0px;        
        margin-bottom: 0px;
        height: 150px;
    }

</style>