举例:
<template>
<div class="main">
<el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
<el-dialog
width="30%"
title="内层 Dialog"
:visible.sync="innerVisible"
append-to-body
custom-class="cloudBody">
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false">取 消</el-button>
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
outerVisible: false,
innerVisible: false
};
}
}
</script>
<style lang="scss" scoped>
.main{
/deep/ .el-dialog.cloudBody{
width: 500px!important;
margin-top: 20vh!important;
}
}
</style>
需求是改嵌套层的弹框大小,所以给它加了custom-class类,但是确没有改变它的样式。
解决办法:
<style lang="scss" scoped>
.main{
}
/deep/ .el-dialog.cloudBody{
width: 500px!important;
margin-top: 20vh!important;
}
</style>
总结:
dialog也相当于一个组件,而我们的样式scoped是局部样式,所以我们写在它的里面,它是找不到的,所以要把dialog样式加到外面,这样就可以啦。