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

这篇具有很好参考价值的文章主要介绍了vue项目为例解决element ui 时间选择器 picker使用样式穿透不起作用问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天在开发中需要修改时间选择器弹出的这个组件的样式
vue项目为例解决element ui 时间选择器 picker使用样式穿透不起作用问题
但这个东西比较坑爹首先不能影响其他组件
就是其他组件用了时间选择器不能受到我们写的样式的影响
那么就只好穿透了
但你会发现这东西是作用与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”
然后我们看界面
vue项目为例解决element ui 时间选择器 picker使用样式穿透不起作用问题
那么我设置的这个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>

没有 scoped 可能有人就会说那如果别人也用了RedefineScope-node-repeat不是会受到样式影响吗？
不要钻牛角尖啊我觉得没有这个可能如果有那就改一下类名嘛
不要做完美主义者文章来源地址https://www.toymoban.com/news/detail-452322.html

到了这里，关于vue项目为例解决element ui 时间选择器 picker使用样式穿透不起作用问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！