解決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 指定下拉框類(lèi)名 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組件中的樣式，用外層的樣式類(lèi)名約束了要控制的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)指定下拉框類(lèi)名。這樣就可以使用這個(gè)指定的類(lèi)名+vue深度選擇器在全局樣式中唯一重寫(xiě)某個(gè)需要自定的DateTimePicker的彈出框部分。
<template>
<div class="app-container ">
<el-date-picker
v-model="..."
type="datetimerange"
align="right"
range-separator="至"
start-placeholder="開(kāi)始時(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)文章
Vue3使用路由及配置vite.alias簡(jiǎn)化導(dǎo)入寫(xiě)法的過(guò)程詳解
這篇文章主要介紹了Vue3使用路由及配置vite.alias簡(jiǎn)化導(dǎo)入寫(xiě)法，本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關(guān)于Vue前端生成UUID的相關(guān)資料,前端需要生成一個(gè)唯一標(biāo)識(shí)符作為ID時(shí),可以使用Vue UUID插件,比如生成訂單號(hào)、用戶(hù)ID等等,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue接入下載文件接口問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue如何實(shí)現(xiàn)動(dòng)態(tài)的選中狀態(tài)切換效果
這篇文章主要介紹了vue如何實(shí)現(xiàn)動(dòng)態(tài)的選中狀態(tài)切換效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
element-plus結(jié)合sortablejs實(shí)現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來(lái)的table,結(jié)合sortable.js實(shí)現(xiàn)table行拖動(dòng)排序,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的同學(xué)可以自己動(dòng)手試一試2023-10-10
VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）
這篇文章主要介紹了VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2020-04-04
解決vue接口數(shù)據(jù)賦值給data沒(méi)有反應(yīng)的問(wèn)題
今天小編就為大家分享一篇解決vue接口數(shù)據(jù)賦值給data沒(méi)有反應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue父子組建的簡(jiǎn)單通信之控制開(kāi)關(guān)Switch的實(shí)現(xiàn)
這篇文章主要介紹了Vue父子組建的簡(jiǎn)單通信之控制開(kāi)關(guān)Switch的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
手把手教你如何運(yùn)行一個(gè)前端uniapp項(xiàng)目
這篇文章主要介紹了如何設(shè)置和運(yùn)行一個(gè)基于uni-app框架的項(xiàng)目,包括安裝必要的軟件、克隆項(xiàng)目并安裝依賴(lài),以及如何使用HBuilderX進(jìn)行項(xiàng)目運(yùn)行和調(diào)試,需要的朋友可以參考下2025-01-01
Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03