elemnetUI 修改dialog的custom-class不生效_customclass不生效

elemnetUI 修改dialog的custom-class不生效

<template>
  <el-dialog
    :appendToBody="true"
    :visible="show"
    @close="close()"
    v-if="show"
    title="详情"
    top="2.5%"
    mim-width="900px"
    height="100%"
    overflow="hidden"
    custom-class="xx-dialog"
    :destroy-on-close="destroyClose"
  >
    <div class="x-html">
      <iframe :src="query.url" class="iframe-container"></iframe>
    </div>
  </el-dialog>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

是由于style的scoped属性导致的，此时我们可以选择在该组件中混用全局样式和局部样式，将xx-dialog写入全局样式中，如下

代码

<style lang="scss">
.xx-dialog {
  height: 90%;
  min-height: 900px;
  margin: 0 auto;
  background-color: #2a3688;

  .el-dialog__body {
    height: calc(100% - 54px);
    padding: 0;
    overflow: hidden;
  }

  .x-html {
    width: 100%;
    height: calc(100% - 40px);
    padding: 20px;
    overflow: hidden;
    background-color: white;

    .iframe-container {
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}
</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