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.mzph.cn/news/885340.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微软日志丢失事件敲响安全警钟

NEWS | 事件回顾 最近&#xff0c;全球最大的软件公司之一——微软&#xff0c;遭遇了一场罕见的日志丢失危机。据报告&#xff0c;从9月2日至9月19日&#xff0c;持续长达两周的时间里&#xff0c;微软的多项核心云服务&#xff0c;包括身份验证平台Microsoft Entra、安全信息…

2021-04-22 51单片机玩转点阵

理论就不赘述了,网络上多得很,直接从仿真软件感性上操作认识点阵,首先打开ISIS仿真软件,放置一个点阵和电源与地线就可以开始了;由点阵任何一脚连线到地线,另一边对应的引脚就连接到电源,如图:点击运行看是否点亮?看到蓝色与红色的点表示电源正常但是没有任何亮点,这时对调一下…

(十三)JavaWeb后端开发——MySQL2

目录 1.DQL数据查询语言 1.1基本查询 1.2条件查询 where关键字 1.3分组查询 1.4排序查询 1.5分页查询 2.多表设计 3.多表查询——联查 4.多表查询——子查询​ 5.MySQL 事务 6.事务管理&#xff08;事务进阶&#xff09; 7.MySQL 索引 1.DQL数据查询语言 分为五大…

Ubuntu系统电脑没有WiFi适配器

电脑安装了Ubuntu20.04后发现没办法连接WiFi,也找不到WiFi图标,一般来说是因为Ubuntu系统没有网卡驱动,安装一下即可 解决办法如下: 先用网线或者手机开热点连接到到电脑,让电脑有网络可以使用.终端执行更新命令sudo apt updatesudo apt-get install bcmwl-kernel-source 执行s…

恭喜!2024年度大连市科技人才创新、科技人才创业项目拟立项公示!

精选SCI/SSCI/EI SCI&EI ●IEEE 1区TOP 计算机类&#xff08;含CCF&#xff09;&#xff1b; ●EI快刊&#xff1a;最快1周录用&#xff01; 知网(CNKI)、谷歌学术期刊 ●7天录用-检索&#xff08;100%录用&#xff09;&#xff0c;1周上线&#xff1b; 免费稿件评估 …

Spring Boot 接口与单元测试

一、引言 在现代软件开发中&#xff0c;构建高质量的应用是至关重要的目标。Spring Boot 作为一种流行的 Java 开发框架&#xff0c;为快速构建企业级应用提供了强大的支持。然而&#xff0c;仅仅依靠开发过程中的调试是远远不够的&#xff0c;单元测试作为一种有效的质量保障手…

【前端】-音乐播放器(源代码和结构讲解,大家可以将自己喜欢的歌曲添加到数据当中,js实现页面动态显示音乐)

前言&#xff1a;音乐播放器是前端开发中的一个经典项目&#xff0c;通过它可以掌握很多核心技术&#xff0c;如音频处理、DOM操作、事件监听、动画效果等。这个项目不仅能提升前端开发的技能&#xff0c;还能让开发者深入理解JavaScript与HTML的协同作用。 页面展示&#xff1…

让SQL更优雅!深入浅出【公用表表达式(CTE)】语法及实战案例

全文目录&#xff1a; 开篇语&#x1f31f; 前言&#x1f4dc; 目录&#x1f4a1; 什么是CTE&#xff1f;&#x1f3a8; CTE的语法与结构&#x1f4a5; 使用场景&#xff1a;CTE何时更香&#xff1f;&#x1f3ac; CTE实战案例案例1&#xff1a;统计每个部门的平均薪资案例2&am…

虚拟机linux7.9下安装mysql

1.MySQL官网下载安装包&#xff1a; MySQL :: Download MySQL Community Server https://cdn.mysql.com/archives/mysql-5.7/mysql-5.7.39-linux-glibc2.12-x86_64.tar.gz 2.解压文件&#xff1a; #tar xvzf mysql-5.7.39-linux-glibc2.12-x86_64.tar.gz 3.移动文件&#…

03_CC2530基于定时器3的Delay_ms函数

CC2530定时器3与Delay_ms延时函数 前言 ​ Delay函数是开发中常用到的函数&#xff0c;可以用于按键消抖&#xff0c;LED闪烁&#xff0c;生成一定频率信号等(软件模拟通讯协议)。由于利用循环执行一定次数的空指令实现的延时函数在精度上并不能让人满意&#xff0c;而用定时…

【系统面试篇】其他相关题目——虚拟内存、局部性原理、分页、分块、页面置换算法

目录 一、相关问题 1. 什么是虚拟内存&#xff1f;为什么需要虚拟内存&#xff1f; &#xff08;1&#xff09;内存扩展 &#xff08;2&#xff09;内存隔离 &#xff08;3&#xff09;物理内存管理 &#xff08;4&#xff09;页面交换 &#xff08;5&#xff09;内存映…

43.第二阶段x86游戏实战2-提取游戏里面的lua

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 本人写的内容纯属胡编乱造&#xff0c;全都是合成造假&#xff0c;仅仅只是为了娱乐&#xff0c;请不要…

容器内pip安装Apache Airflow的经历:如何重置初始密码

背景 Apache Airflow™https://github.com/apache/airflow 是一个开源平台&#xff0c;用于开发、调度和监控面向批处理的工作流程。Airflow 可扩展的 Python 框架使您能够构建几乎可以连接任何技术的工作流程。Web 界面有助于管理工作流程的状态。Airflow 可以通过多种方式部…

BP 网络的标准学习算法及其实现

BP 网络的标准学习算法及其实现 一、引言 BP&#xff08;Back Propagation&#xff09;神经网络是一种广泛应用于机器学习和人工智能领域的神经网络模型。它通过反向传播算法来调整网络的权重&#xff0c;以最小化预测输出和实际输出之间的误差。BP 网络的标准学习算法对于理…

Java爬虫 爬取某招聘网站招聘信息

Java爬虫 爬取某招聘网站招聘信息 一、系统介绍二、功能展示1.需求爬取的网站内容2.实现流程2.1数据采集2.2页面解析2.3数据存储 三、其它1.其他系统实现 一、系统介绍 系统主要功能&#xff1a;本项目爬取的XX招聘网站 二、功能展示 1.需求爬取的网站内容 2.实现流程 爬虫…

stm32不小心把SWD和JTAG都给关了,程序下载不进去,怎么办?

因为想用STM32F103的PA15引脚&#xff0c;调试程序的时候不小心把SWD和JTAD接口都给关了&#xff0c;先看下罪魁祸首 GPIO_PinRemapConfig(GPIO_Remap_SWJ_JTAGDisable,ENABLE);//关掉JTAG&#xff0c;不关SWGPIO_PinRemapConfig(GPIO_Remap_SWJ_Disable, ENABLE);//关掉SW&am…

雷军-2022.8小米创业思考-11-新零售:用电商思维做新零售,极致的效率+极致的体验。也有弯路,重回极致效率的轨道上。

第十一章 新零售 当我们说到小米模式的时候&#xff0c;其实我们说的是两件东西&#xff1a; 一是小米模式的本质&#xff0c;即高效率的商业模式&#xff1b; 另一件是小米这家公司具象的商业模式&#xff0c;这是小米在实践中摸索、建立的一整套业务模型。 从2015年到202…

C语言实现数据结构之堆

文章目录 堆一. 树概念及结构1. 树的概念2. 树的相关概念3. 树的表示4. 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 二. 二叉树概念及结构1. 概念2. 特殊的二叉树3. 二叉树的性质4. 二叉树的存储结构 三. 二叉树的顺序结构及实现1. 二叉树的顺序结构2.…

DocuBurst——基于java实现

DocuBurst 文档散(DocuBurst)也是基于关键词的文本可视化,不过它还通过径向布局体现了词的语义等级。如下图所示,外层的词是内层词的下义祠,颜色饱和度的深浅用来体现词频的高低。 DocuBurst 是第一个利用词法数据库中人工创建的结构的文档内容可视化。我们使用公认的设…

知识课堂之域名系统中实现动态代理

怎么在域名系统中解析动态ip&#xff0c;这一直是一个需要解决的问题&#xff0c;人们对与网络的稳定连接与灵活运用已经成为生活和工作中不可或缺的一部分&#xff0c;因此这样的问题的解决迫在眉睫。 大家对于动态ip是什么&#xff0c;应该都有所了解了&#xff0c;所谓的动…