在日常开发中,我发现想要修改elementUI的对话框el-dialog中的样式,比如对话框的头部样式el-dialog__header和底部样式el-dialog__footer修改,可以在当前页面中的style的scoped属性下,只要使用:deep或者>>>或者::v-deep这样的深入选择器进行修改是可以有效的,比如如下样式

:deep(.el-dialog) {
  margin: 80px auto 40px;
  border-radius: 4px;

  .el-form {
    padding-right: 80px;
  }

  .el-dialog__header {
    border-bottom: 1px solid #ddd;
    padding: 16px 24px;
    .el-dialog__title {
      font-size: 16px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      font-size: 16px !important;
    }
  }
  .el-dialog__footer {
    border-top: 1px solid #ddd;
    padding: 10px 16px;
  }
}
}

这样改是有效的,但是你如果是在vue3的element-plus中按照如上的修改方式,你会发现element-plus中的el-dialog的样式是不能生效的,不管你使用怎样的深入选择器都不行,只要有scoped在,所以最后我发现如果想要修改element-plus中的dialog的样式 ,只能去掉scoped,去掉scoped之后,不用深入选择器也可以修改样式,但是如果去掉scoped的话,就会导致其他页面的el-dialog的样式遭到污染,所以这时候你可以在el-dialog中添加一个custom-class=“notice-dialog”,不能直接添加class,添加class,你会发现找不到对应的类名,只能添加custom-class,设置一个独一无二的类名,然后根据这个类名进行样式修改即可,*至于为什么在scoped中,修改样式不生效的原因我也不明白,所以我才把这个记录下来,希望有知道的大佬能告诉我下,谢谢!*因为scoped中的样式不生效,所以我只能在一个页面中添加俩个style,一个没有scoped,一个有scoped,如下所示

<style lang="scss">
.notice-dialog .el-dialog__headerbtn {
  top: 30px;
}
.notice-dialog .el-dialog__header {
  border-bottom: 1px solid #eee;
}
.notice-dialog .el-dialog__body {
  padding: 0px 30px 20px !important;
}
</style>
<style lang="scss" scoped>
.my-header {
  display: flex;
  justify-content: space-between;
}
.has-read {
  margin-right: 30px;
}
</style>

el-dialog是我发现的elementUI和element-plus中不一样的,一个scoped中有效,一个scoped无效的,但是我还发现了另一个不管是elementUI还是element-plus中,再scoped中都是无效的,只能在没有scoped中设置才有效,那就是el-table表格中的内容显示过长使用省略号的tooltip的样式,想要修改这个样式,你只能放在没有scoped中才会生效,至于怎么修改,你们可以找到对应的样式名称,不使用深度选择器也可以直接改,在element-plus中是叫.el-popper,在elementUI中也是叫这个,代码如下

<style lang="scss">
  .el-popper {
  max-width: 1000px !important;
}
</style>

我发现好像这个tooltip的样式是跟body同一级别的,不知道是不是因为这个原因导致的scoped中不生效的。

以上问题是我再日常开发中遇到的问题,因为不明白其中的道理,所以记录下来,到时候可能会用到,希望这个问题也能帮助到其他人,感谢大家的阅读,同时也希望有大佬能来帮我解释下这个问题,好让我能够彻底的明白!谢谢大佬们的青睐!

GitHub 加速计划 / el / element-plus
23.88 K
15.38 K
下载
element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库,提供了丰富且易于使用的 UI 组件,用于快速搭建企业级桌面和移动端的前端应用。
最近提交(Master分支:1 个月前 )
c1863f50 3 个月前
b55163fd 3 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐