element-ui el-dialog如何设置响应式宽高且永远水平垂直居中

el-dialog布局技巧：实现自适应居中对话框

原创已于 2022-04-27 18:18:28 修改 · 1.1w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

于 2022-04-27 18:16:57 首次发布

element-ui一些组件使用记录专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何通过调整el-dialog的宽度为百分比、高度用vh单位，以及修改top属性和定位，实现在不同屏幕尺寸下水平垂直居中的自适应弹窗效果。附带了Vue代码示例和CSS样式调整。

写在前面

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>