如何解決element DateTimePicker+vue彈出框只顯示小時

這篇文章主要介紹了如何解決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標記的style標簽中），利用css 后代選擇器+vue深度選擇器可以鎖定要控制的element ui組件中的樣式，用外層的樣式類名約束了要控制的element ui組件內部的樣式，所以不會造成全局所有element ui組件被污染的情況。

但是DateTimePicker比較特殊，彈出框的dom不隸屬于當前的vue文件內的任何標簽，所以無法在當前頁用css 后代選擇器+vue深度選擇器鎖定要自定義樣式的DateTimePicker的彈出框部分。通過查閱DateTimePicker的官方文檔發現可以使用popper-class來指定下拉框類名。這樣就可以使用這個指定的類名+vue深度選擇器在全局樣式中唯一重寫某個需要自定的DateTimePicker的彈出框部分。

<template>
 <div class="app-container ">
 
     <el-date-picker
      v-model="..."
      type="datetimerange"
      align="right"
      range-separator="至"
      start-placeholder="開始時間"
      end-placeholder="結束時間"
      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>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決element DateTimePicker+vue彈出框只顯示小時”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!