亲宝软件园·资讯

展开

element DateTimePicker弹出框 解决element DateTimePicker+vue弹出框只显示小时

Sunny-Andy 人气:0
想了解解决element DateTimePicker+vue弹出框只显示小时的相关内容吗,Sunny-Andy在本文为您仔细讲解element DateTimePicker弹出框的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:element,DateTimePicker弹出框,element,只显示小时,element,DateTimePicker,下面大家一起来学习吧。

三个知识点:

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/

在搞清楚上述三个知识点的前提下,在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弹出框内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持! 

加载全部内容

相关教程
猜你喜欢
用户评论