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.rhkb.cn/news/468975.html

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

相关文章

【go从零单排】go中的三种数据类型array、slices、maps

Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 array数组 package mainimport "fmt"func main() {var a [5]int //var关键字定义数组&#xff0c;[5]表…

科技改变阅读习惯:最新研究揭示电子阅读器的普及趋势

据QYResearch调研团队最新报告“全球电子阅读器市场报告2023-2029”显示&#xff0c;预计2029年全球电子阅读器市场规模将达到6.9亿美元&#xff0c;未来几年年复合增长率CAGR为0.4%。 如上图表/数据&#xff0c;摘自QYResearch最新报告“全球电子阅读器市场研究报告2023-2029.…

解决 VSCode 中 C/C++ 编码乱码问题的两种方法

解决 VSCode 中 C/C 编码乱码问题的两种方法 在中国地区&#xff0c;Windows 系统中的 cmd 和 PowerShell 默认编码是 GBK&#xff0c;但 VSCode 默认使用 UTF-8 编码。这种编码不一致会导致在 VSCode 终端中运行 C/C 程序时出现乱码。以下介绍两种方法来解决这一问题。 方法…

UE5遇到问题记录

问题描述&#xff1a; 在让敌人自动追踪玩家的时候一开始运行就会播放攻击的动画 解决方法&#xff1a; 这样是因为敌人一开始就检测到自己了&#xff0c;所以触发动画。 方式一&#xff1a;加一个条件 方式二&#xff1a;改一下碰撞预设

内网对抗-信息收集篇SPN扫描DC定位角色区域定性服务探针安全防护凭据获取

知识点&#xff1a; 1、信息收集篇-网络架构-出网&角色&服务&成员 2、信息收集篇-安全防护-杀毒&防火墙&流量监控 3、信息收集篇-密码凭据-系统&工具&网站&网络域渗透的信息收集&#xff1a; 在攻防演练中&#xff0c;当完成边界突破后进入内…

基于Matlab 疲劳驾驶检测

Matlab 疲劳驾驶检测 课题介绍 该课题为基于眼部和嘴部的疲劳驾驶检测。带有一个人机交互界面GUI&#xff0c;通过输入视频&#xff0c;分帧&#xff0c;定位眼睛和嘴巴&#xff0c;通过眼睛和嘴巴的张合度&#xff0c;来判别是否疲劳。 二、操作步骤 第一步&#xff1a;最…

11.11 代码块

一 java 1.代码块 1&#xff09; 理解 使用构造器时&#xff1a;先默认 调用代码块内容 再调用 构造器内容【代码块 > 构造器】 1.1 细节 1&#xff09;静态代码块 只能加载一次 2&#xff09;先调用父类代码块 再子类代码块 3&#xff09;静态代码块是随着类加载而执行…

在gitlab,把新分支替换成master分支

1、备份master分支&#xff0c;可以打tag 2、删除master分支 正常情况下&#xff0c;master分支不允许删除&#xff0c;需要做两个操作才能删除 a、变更项目默认分支为非master分支&#xff0c;可以先随便选择 b、取消master为非保护分支 操作了上述两步&#xff0c;就可以删…

在使用element中的抽屉<el-drawer>页签<el-tabs/>组合时,echarts图表宽度显示异常问题

类似这种情况&#xff0c;宽度异常 原因&#xff1a;在展示出抽屉时&#xff0c;图表的组件一件初始化了&#xff0c;导致他的宽度提前设定好了&#xff08;我默认的style"width: 100%; height: 300px;"&#xff09;&#xff0c;我得解决方法有2个&#xff1a; 1、第…

《大模型应用开发极简入门》笔记

推荐序 可略过不看。 初识GPT-4和ChatGPT LLM概述 NLP的目标是让计算机能够处理自然语言文本&#xff0c;涉及诸多任务&#xff1a; 文本分类&#xff1a;将输入文本归为预定义的类别。自动翻译&#xff1a;将文本从一种语言自动翻译成另一种语言&#xff0c;包括程序语言。…

Unicode字符集(万国码)

1.三种编码方式&#xff1a; UTF-16&#xff1a;16个bit位&#xff08;2个字节&#xff09;存储 UTF-32&#xff1a;32个bit位&#xff08;4个字节&#xff09;存储 UTF-8&#xff1a;可变长度字符编码。1-4个字节存储&#xff0c;只需记住&#xff1a;英文字母1个字节表示&…

支持 Win10 的网络环境模拟(丢包,延迟,带宽)

升级 Windows 10 以后&#xff0c;原来各种网络模拟软件都挂掉了&#xff0c;目前能用的就是只有 clumsy&#xff1a; 唯一问题是不支持模拟带宽&#xff0c;那么平时要模拟一些糟糕的网络情况的话&#xff0c;是不太方便的&#xff0c;而开虚拟机用 Linux tc 或者设置个远程 l…

【Homework】【5】Learning resources for DQ Robotics in MATLAB

Lesson 5 代码-TwoDofPlanarRobot.m 表示一个 2 自由度平面机器人。该类包含构造函数、计算正向运动学模型的函数、计算平移雅可比矩阵的函数&#xff0c;以及在二维空间中绘制机器人的函数。 classdef TwoDofPlanarRobot%TwoDofPlanarRobot - 表示一个 2 自由度平面机器人类…

在模方置平建筑失败的原因是什么?

在模方置平建筑失败的原因是什么&#xff1f; 可能是obj拓扑不连续&#xff0c;可以在网格大师使用osgb转obj功能&#xff0c;选择拓扑或者重建。 网格大师是一款能够解决实景三维模型空间参考、原点、瓦块大小不统一&#xff0c;重叠区域处理问题的工具“百宝箱”&#xff0c…

【大咖云集 | IEEE计算智能学会广州分会支持】第四届信息技术与当代体育国际学术会议(TCS 2024,12月13-15日)

第四届信息技术与当代体育国际学术会议&#xff08;TCS 2024&#xff09; 2024 4th International Conference on Information Technology and Contemporary Sports 重要信息 会议官网&#xff1a;www.icitcs.net&#xff08;会议关键词&#xff1a;TCS 2024&#xff09; 202…

常用机器人算法原理介绍

一、引言 随着科技的不断发展&#xff0c;机器人技术在各个领域得到了广泛应用。机器人算法是机器人实现各种功能的核心&#xff0c;它决定了机器人的行为和性能。本文将介绍几种常用的机器人算法原理&#xff0c;包括路径规划算法、定位算法和运动控制算法。 二、路径规划算法…

Cynet:全方位一体化安全防护工具

前言 1999年&#xff0c;布鲁斯施奈尔曾说过&#xff1a;“复杂性是安全最大的敌人。”彼时还是19年前&#xff0c;而现在&#xff0c;网络安全已然变得更加繁杂。 近日我在网上冲浪过程中发现了这么一个平台性质的软件&#xff0c;看似具有相当强的防护能力。 根据Cynet的描…

dolphin 配置data 从文件导入hive 实践(一)

datax 支持多种数据源的相互读写&#xff0c;作为开源软件&#xff0c;提供了离线采集功能&#xff0c;方便系统开发&#xff0c;过程中遇到诸多配置&#xff0c;需要开发者自己探索&#xff0c;免费同样有成本 配置模板 {"setting": {},"job": {"s…

Redis如何保证数据不丢失(可靠性)

本文主要以学习为主&#xff0c;详细参考&#xff1a;微信公众平台 Redis 保证数据不丢失的主要手段有两个&#xff1a; 持久化 多机部署 我们分别来看它们两的具体实现细节。 1.Redis 持久化 持久化是指将数据从内存中存储到持久化存储介质中&#xff08;如硬盘&#xf…

Linux数据管理初探

Linux数据管理初探 导语内存管理内存分配内存错用和处理 文件锁定锁文件/区域锁读写和竞争锁命令和死锁 dbm数据库例程dbm访问函数其他dbm函数 总结参考文献 导语 Linux为应用程序提供简洁的视图用来反映可直接寻址的内存空间&#xff08;但实际上可能是内存外存&#xff09;&…