当前位置: 首页 > news >正文

elementUI 点击弹出时间 date-picker

 elementUI的日期组件,有完整的UI样式及弹窗,但是我的页面不要它的UI样式,点击的时候却要弹出类似的日期选择器,那怎么办呢?

以下是elementUI自带的UI风格,一定要一个输入框来触发。

这是我的项目中要用到的UI风格:区别在于我不需要它的输入框来触发!

以下是实现参考:

<div class="flex-row"><span class="el-descriptions__title">患者时间轴</span><span class="time-batch picker_view_input">{{ `当前就诊时间跨度:${startDate}~${endDate}` }}<iclass="el-icon-edit"></i><el-date-picker @change="dateChenge" v-model="dateModelValue" type="date":picker-options="pickerOptions" value-format="yyyy-MM-dd"></el-date-picker></span>
</div>

隐藏默认的样式:

::v-deep {.picker_view_input {cursor: pointer;position: relative !important;}//修改控件自带的css.picker_view_input {.el-date-editor {position: absolute; //绝对定位top: 0;left: 0;width: 100%;opacity: 0; //设置完全透明cursor: pointer;}.el-range-input {cursor: pointer;}}
}

以相同的思路,其他自带UI的组件均也可以这样自定义UI,点击时弹出其功能弹窗! 

http://www.lryc.cn/news/480899.html

相关文章:

  • 【浙江大学大模型系列】启真医疗大模型(国内大模型)
  • NestJS 项目中如何使用 class-validator 进行数据验证
  • 【AI抠图整合包及教程】Meta SAM2:引领图像和视频分割技术的新纪元
  • 小菜家教平台(三):基于SpringBoot+Vue打造一站式学习管理系统
  • ArcGIS/QGIS按掩膜提取或栅格裁剪后栅格数据的值为什么变了?
  • Linux的基本指令(一)
  • python导入包失败 in <module> import pandas as pd
  • 不惧风雨,硬核防护!雷孜LaCie小金刚三防移动硬盘颠覆认知
  • Yocto 项目下通过网络更新内核、设备树及模块
  • Scheduled Sampling工作原理【小白记笔记】
  • C++:C++的IO流
  • 「QT」几何数据类 之 QLine 整型直线类
  • day58 图论章节刷题Part09(dijkstra(堆优化版)、Bellman_ford 算法)
  • 【计网不挂科】计算机网络期末考试——【选择题&填空题&判断题&简述题】试卷(1)
  • 智能出行助手:SpringBoot共享汽车管理平台
  • 【月之暗面kimi-注册/登录安全分析报告】
  • Flink实现实时数据处理
  • 11.9.2024刷华为
  • Chromium 中chrome.system.storage扩展接口定义c++
  • 【Qt聊天室客户端】登录窗口
  • 如何显示模型特征权重占比图【数据分析】
  • Ubuntu24安装MySQL
  • 微服务架构面试内容整理-Eureka
  • qt QErrorMessage详解
  • SpringBoot 将多个Excel打包下载
  • 分页存储小总结
  • Star-CCM+应用篇之动力电池温度场仿真操作流程与方法
  • Spring Boot应用开发:从入门到精通
  • 【JAVA项目】基于jspm的【医院病历管理系统】
  • Python中的常见配置文件写法