关于vue的elementUI和vue3的element-plus的el-dialog的样式以及el-table中的tooltip的样式修改(个人见解)
在日常开发中,我发现想要修改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中不生效的。
以上问题是我再日常开发中遇到的问题,因为不明白其中的道理,所以记录下来,到时候可能会用到,希望这个问题也能帮助到其他人,感谢大家的阅读,同时也希望有大佬能来帮我解释下这个问题,好让我能够彻底的明白!谢谢大佬们的青睐!
更多推荐
所有评论(0)