今天在開發(fā)中 需要修改時間選擇器彈出的這個組件的樣式
但這個東西比較坑爹 首先 不能影響其他組件
就是其他組件用了時間選擇器 不能受到我們寫的樣式的影響
那么 就只好穿透了
但你會發(fā)現(xiàn) 這東西是作用與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就上去了
可能大家又想用穿透 啊 這里幫大家試過了 沒效果
不過 我們這個類名可以取特殊一點 不要跟別人重復
然后這樣寫樣式文章來源：http://www.zghlxwxcb.cn/news/detail-452322.html
<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不是會受到樣式影響嗎？
不要鉆牛角尖啊 我覺得沒有這個可能 如果有 那就改一下類名嘛
不要做完美主義者文章來源地址http://www.zghlxwxcb.cn/news/detail-452322.html
到了這里，關于vue項目為例解決element ui 時間選擇器 picker使用樣式穿透不起作用問題的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
