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