解決element DateTimePicker+vue彈出框隻顯示小時

Posted on by

三個知識點：

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彈出框隻顯示小時的文章就介紹到這瞭,更多相關element DateTimePicker彈出框內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！ 

推薦閱讀：