写在前面
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>