解決element DateTimePicker+vue彈出框只顯示小時
三個知識點：
1.css 后代選擇器
https://www.w3school.com.cn/css/css_selector_descendant.asp
2.vue深度選擇器
https://vue-loader.vuejs.org/zh/guide/scoped-css.html
3.element ui DateTimePicker 指定下拉框類名 popper-class
https://element.eleme.cn/#/zh-CN/component/datetime-picker
在搞清楚上述三個知識點的前提下，在vue頁面的全局樣式中（即不帶有scoped標(biāo)記的style標(biāo)簽中），利用css 后代選擇器+vue深度選擇器可以鎖定要控制的element ui組件中的樣式，用外層的樣式類名約束了要控制的element ui組件內(nèi)部的樣式，所以不會造成全局所有element ui組件被污染的情況。
但是DateTimePicker比較特殊，彈出框的dom不隸屬于當(dāng)前的vue文件內(nèi)的任何標(biāo)簽，所以無法在當(dāng)前頁用css 后代選擇器+vue深度選擇器鎖定要自定義樣式的DateTimePicker的彈出框部分。通過查閱DateTimePicker的官方文檔發(fā)現(xiàn)可以使用popper-class來指定下拉框類名。這樣就可以使用這個指定的類名+vue深度選擇器在全局樣式中唯一重寫某個需要自定的DateTimePicker的彈出框部分。
<template>
<div class="app-container ">
<el-date-picker
v-model="..."
type="datetimerange"
align="right"
range-separator="至"
start-placeholder="開始時間"
end-placeholder="結(jié)束時間"
format="yyyy-MM-dd HH"
value-format="yyyy-MM-dd HH"
popper-class="tpc"
></el-date-picker>
</div>
</template>
<style lang="scss" scoped>
...
</style>
<style>
.tpc /deep/ .el-time-spinner__wrapper {
width:100% !important;
}
.tpc /deep/ .el-scrollbar:nth-of-type(2) {
display: none !important;
}
</style>
到此這篇關(guān)于解決element DateTimePicker+vue彈出框只顯示小時的文章就介紹到這了,更多相關(guān)element DateTimePicker彈出框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-element-admin關(guān)閉eslint的校驗方式
這篇文章主要介紹了vue-element-admin關(guān)閉eslint的校驗方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue-CLI項目中路由傳參的方式詳解，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Vue結(jié)合路由配置遞歸實現(xiàn)菜單欄,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)火鍋工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
Vue組件傳值異步問題子組件拿到數(shù)據(jù)較慢解決
這篇文章主要為大家介紹了Vue組件傳值異步中子組件拿到數(shù)據(jù)較慢的問題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-08-08
這篇文章主要介紹了在Vant的基礎(chǔ)上封裝下拉日期控件的代碼示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue-cli創(chuàng)建項目時由esLint校驗導(dǎo)致報錯或警告的問題及解決
這篇文章主要介紹了vue-cli創(chuàng)建項目時由esLint校驗導(dǎo)致報錯或警告的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue()開始就是vue生命周期的開始。Vue實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過程,稱這是Vue的?命周期2022-11-11
Vue 最獨特的特性之一，是非侵入式的響應(yīng)系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對象。而當(dāng)你修改它們時，視圖會進行更新。本文將通過示例詳解Vue的響應(yīng)式原理，感興趣的可以了解一下2022-03-03
這篇文章主要介紹了typescript中this報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
在vue中,key是dom對象的標(biāo)識,本文主要介紹了Vue中key的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06