脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → element DateTimePicker弹出框

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

 更新时间：2021年03月16日 09:30:39   作者：Sunny-Andy  
这篇文章主要介绍了解决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系列之动态路由详解【原创】。小编觉得挺不错的，现在就想给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue 组件注册实例详解

    Vue 组件注册实例详解

    这篇文章主要介绍了Vue 组件注册,结合实例形式较为详细的分析了vue.js组件的常见分类、注册方法及相关操作注意事项,需要的朋友可以参考下
    2019-02-02
  • Vite版本更新检查实现页面自动刷新的解决思路

    Vite版本更新检查实现页面自动刷新的解决思路

    这篇文章主要给大家介绍了关于Vite版本更新检查实现页面自动刷新的解决思路,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • vue实现登陆登出的实现示例

    vue实现登陆登出的实现示例

    本篇文章主要介绍了vue实现登陆登出的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue Cli3 创建项目的方法步骤

    Vue Cli3 创建项目的方法步骤

    Vue CLI是一个用于快速Vue.js开发的完整系统。这篇文章主要介绍了Vue Cli3 创建项目的方法步骤，非常具有实用价值，需要的朋友可以参考下
    2018-10-10
  • vue中路由跳转的方式有哪些你知道吗

    vue中路由跳转的方式有哪些你知道吗

    这篇文章主要为大家介绍了vue路由跳转的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-11-11
  • vue + socket.io实现一个简易聊天室示例代码

    vue + socket.io实现一个简易聊天室示例代码

    本篇文章主要介绍了vue + socket.io实现一个简易聊天室示例代码，具有一定的参考价值，有兴趣的可以了解一下。
    2017-03-03
  • vue中解决拖拽改变存在iframe的div大小时卡顿问题

    vue中解决拖拽改变存在iframe的div大小时卡顿问题

    这篇文章主要介绍了vue中解决拖拽改变存在iframe的div大小时卡顿问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue实现element上传多张图片浏览删除功能

    vue实现element上传多张图片浏览删除功能

    这篇文章主要介绍了vue实现element上传多张图片浏览删除功能,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10
  • Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

    Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

    今天很郁闷，遇到这样一个奇葩问题，使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错误，折腾半天才解决好，下面小编把Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案分享给大家，需要的朋友一起看看吧
    2018-05-05

最新评论