写在前面

el-dialog是使平常使用element-ui比较常用的一个组件，想要灵活控制它达到想要的开发效果，就必须要熟悉它默认一些属性：默认

width:50%

，

高度

为标题和el-dialog__body，el-dialog__footer

内容以及padding撑开

，定位上

默认水平居中，距离顶端15vh

具体实现

原理是width采用百分比，height赋值为vh，覆盖el-dialog默认的top:15vh改为top: 0vh，最后设置定位让它来水平垂直居中。

代码示例：

*vue

<template>
    <div>
        <el-button @click="dialogVisible = true">单击打开弹框</el-button>

        <el-dialog
         title="标题XX"
         :visible.sync="dialogVisible"
         width="75%"
         top="0vh"
         custom-class="center-dialog"
        >
            <div style="height: 80vh;">dialog内容...</div>
            <span slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        dialogVisible: false
    }
}
</script>

<style lang="scss">
// 控制的dialog样式需要穿透到底层，所以这里不能写scoped属性
// 如果不想影响全局，可以给el-dialog的父级定义一个class,再把.center-dialog置于这个class的嵌套里面
.center-dialog {
    top: 50%;
    transform: translateY(-50%)
}
</style>