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

这篇具有很好参考价值的文章主要介绍了element-ui el-dialog如何设置响应式宽高且永远水平垂直居中。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面

el-dialog是使平常使用element-ui比较常用的一个组件，想要灵活控制它达到想要的开发效果，就必须要熟悉它默认一些属性：默认width:50%，高度为标题和el-dialog__body，el-dialog__footer内容以及padding撑开，定位上默认水平居中，距离顶端15vh

具体实现

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

代码示例：*vue文章来源地址https://www.toymoban.com/news/detail-513178.html

<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>

到了这里，关于element-ui el-dialog如何设置响应式宽高且永远水平垂直居中的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！