elemnetUI中的嵌套el-dialog弹框中，解决使用custom-class修改样式不生效的问题

举例：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

需求是改嵌套层的弹框大小，所以给它加了custom-class类，但是确没有改变它的样式。

解决办法：

<style lang="scss" scoped>
 .main{
  }
   /deep/ .el-dialog.cloudBody{
      width: 500px!important;
      margin-top: 20vh!important;
    }
</style>
1
2
3
4
5
6
7
8

总结：

dialog也相当于一个组件，而我们的样式scoped是局部样式，所以我们写在它的里面，它是找不到的，所以要把dialog样式加到外面，这样就可以啦。