Lösen Sie das Problem, dass das Element DateTimePicker+vue Popup-Box nur Stunden anzeigt

Drei Wissenspunkte:

1. CSS-Nachkommenselektor

https://www.w3school.com.cn/css/css_selector_descendant.asp

2. Vue-Tiefenselektor

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

3.element ui DateTimePicker gibt den Klassennamen der Dropdown-Box Popper-Klasse an

https://element.eleme.cn/#/zh-CN/component/datetime-picker

Unter der Voraussetzung des Verständnisses der oben genannten drei Wissenspunkte können im globalen Stil der Vue-Seite (dh dem Stil-Tag ohne die Gültigkeitsmarkierung) der CSS-Nachfolgeselektor + der Vue-Tiefenselektor verwendet werden, um den Stil in der zu steuernden Element-UI-Komponente zu sperren, und der äußere Stilklassenname wird verwendet, um den internen Stil der zu steuernden Element-UI-Komponente einzuschränken, sodass nicht alle globalen Element-UI-Komponenten verunreinigt werden.

DateTimePicker ist jedoch etwas Besonderes. Der DOM des Popup-Fensters gehört zu keinem Tag in der aktuellen Vue-Datei. Daher ist es nicht möglich, den CSS-Nachkommenselektor + Vue Deep Selector zu verwenden, um den Popup-Fensterteil des DateTimePickers zu sperren, damit er auf der aktuellen Seite angepasst werden kann. Durch Einsicht in die offizielle Dokumentation von DateTimePicker habe ich herausgefunden, dass ich die Popper-Klasse verwenden kann, um den Klassennamen des Dropdown-Felds anzugeben. Auf diese Weise können Sie diesen angegebenen Klassennamen + Vue Deep Selector verwenden, um den Popup-Box-Teil eines DateTimePicker, der im globalen Stil angepasst werden muss, eindeutig neu zu schreiben.

<Vorlage>
 <div Klasse="App-Container">
 
     <el-Datumsauswahl
      v-Modell="…"
      Typ="Datum/Uhrzeitbereich"
      ausrichten="rechts"
      Bereichstrennzeichen = "bis"
      start-placeholder="Startzeit"
      end-placeholder="Endzeit"
      Format = "jjjj-MM-tt HH"
      Werteformat="jjjj-MM-tt HH"
      Popper-Klasse = "tpc"
     ></el-Datumsauswahl>
 
  </div>
</Vorlage>
<style lang="scss" scoped>
...
</Stil>
 
<Stil>
.tpc /deep/ .el-time-spinner__wrapper {
 Breite: 100 % !wichtig;
}
.tpc /deep/ .el-scrollbar:n-ter-von-Typ(2) {
 Anzeige: keine !wichtig;
}
</Stil>

Dies ist das Ende dieses Artikels zur Lösung des Problems, dass das Popup-Fenster des Elements DateTimePicker+vue nur Stunden anzeigt. Weitere Inhalte zum Popup-Fenster des Elements DateTimePicker finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!