解决父子组件样式互相影响

最新推荐文章于 2024-08-20 16:48:16 发布

最冷一天.

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量106

点赞数 3

分类专栏： Vue 文章标签： javascript vue.js ecmascript

本文链接：https://blog.csdn.net/m0_61603704/article/details/141270046

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

问题描述：在使用element ui 弹窗的时候，父子组件样式会互相影响，父组件的样式会覆盖子组件样式
解决办法：给子组件外层嵌套一个div，并添加 id

父组件代码

::v-deep .el-dialog {
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  margin: 0px !important;
}

子组件代码

  <div id="registerModal">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
    </el-dialog>
  </div>

 #registerModal ::v-deep .el-dialog {
   left: 50%;
   top: 35%;
   transform: translate(-50%, -50%);
   margin: 0px !important;
 }