解决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弹出框只显示小时的文章就介绍到这了,更多相关element DateTimePicker弹出框内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！ 

• vue实现点击出现操作弹出框的示例
• vue实现简单的登录弹出框
• Vue组件化开发之通用型弹出框的实现
• vue弹出框组件封装实例代码
• 使用vue实现各类弹出框组件
• elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
• vue组件实现弹出框点击显示隐藏效果
• 详解用vue编写弹出框组件
• vue3手动封装弹出框组件message的方法

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！