Solve the problem that the element DateTimePicker+vue pop-up box only displays hours

Three knowledge points:

1. CSS descendant selector

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

2.vue deep selector

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

3.element ui DateTimePicker specifies the drop-down box class name popper-class

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

On the premise of understanding the above three knowledge points, in the global style of the vue page (that is, the style tag without the scoped mark), the css descendant selector + vue deep selector can be used to lock the style in the element ui component to be controlled, and the outer style class name is used to constrain the internal style of the element ui component to be controlled, so that all global element ui components will not be polluted.

However, DateTimePicker is special. The DOM of the pop-up box does not belong to any tag in the current Vue file, so it is not possible to use the CSS descendant selector + Vue deep selector to lock the pop-up box part of the DateTimePicker to be customized in the current page. By consulting the official documentation of DateTimePicker, I found that I can use popper-class to specify the class name of the drop-down box. In this way, you can use this specified class name + vue deep selector to uniquely rewrite the pop-up box part of a DateTimePicker that needs to be customized in the global style.

<template>
 <div class="app-container">
 
     <el-date-picker
      v-model="..."
      type="datetimerange"
      align="right"
      range-separator="to"
      start-placeholder="start time"
      end-placeholder="end time"
      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>

This is the end of this article about solving the problem of element DateTimePicker+vue pop-up box only showing hours. For more related element DateTimePicker pop-up box content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!