当前位置：首页 > article >正文

vue项目为例解决element ui 时间选择器 picker使用样式穿透不起作用问题

article 2024/9/24 23:32:05

今天在开发中需要修改时间选择器弹出的这个组件的样式
在这里插入图片描述
但这个东西比较坑爹首先不能影响其他组件
就是其他组件用了时间选择器不能受到我们写的样式的影响
那么就只好穿透了
但你会发现这东西是作用与body下的就很坑穿透我试了挺久的不起作用
但官方文档有提供给我们一个属性
popper-class 能给这个弹出的框外面加一个class
我的代码是这样写的

<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>

主要就是
popper-class=“RedefineScope-node-repeat”
然后我们看界面
在这里插入图片描述
那么我设置的这个class RedefineScope-node-repeat就上去了
可能大家又想用穿透啊这里帮大家试过了没效果
不过我们这个类名可以取特殊一点不要跟别人重复
然后这样写样式

<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>