Today, during development, we need to modify the style of the component that pops up from the time selector,
but this thing is rather tricky. First, it cannot affect other components,
that is, other components use the time selector and cannot be affected by the style we wrote,
so we have to penetrate it
, but you will I found that this thing works with the body, and it’s very penetrating. I tried for a long time, but it didn’t work.
But the official document provides us with an attribute
popper-class, which can add a class to the pop-up box.
My code is like this written
<el-date-picker
v-model="timeConditions"
type="datetimerange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
class="pickerTime"
ref = "datePicker"
:picker-options="pickerOptions"
@change = "defineTimeline"
popper-class="RedefineScope-node-repeat"
>
</el-date-picker>
The main thing is
popper-class="RedefineScope-node-repeat"
and then we look at the interface.
Then the class I set RedefineScope-node-repeat will go up.
Maybe everyone wants to use penetration again. Here I tried it for everyone, but it didn't work,
but ours The class name can be special, don’t repeat it with others
, and then write the style like this
<style>
.RedefineScope-node-repeat .el-date-range-picker__time-header{
display: none !important;
}
.RedefineScope-node-repeat .el-picker-panel__footer .el-button--text.el-picker-panel__link-btn{
display: inline-block !important;
}
.RedefineScope-node-repeat .el-date-table td span{
text-align: center;
}
</style>
Without scoped, some people may say that if others also use RedefineScope-node-repeat, won’t they be affected by the style?
Don’t be a dead end. I don’t think this is possible. If so, then change the class name.
Don’t be a perfectionist.