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}` }}<i
            class="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,点击时弹出其功能弹窗! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/912383.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PCA(主成分分析)算法的应用场景

PCA&#xff08;主成分分析&#xff09;算法的应用场景非常广泛&#xff0c;以下是一些主要的应用领域&#xff1a; 数据压缩&#xff1a; PCA可以将高维数据映射到低维空间&#xff0c;从而实现数据的压缩&#xff0c;减少存储空间和计算复杂度。这对于存储和传输大量数据的情…

优选算法第五讲:位运算模块

优选算法第五讲&#xff1a;位运算模块 1.常见的位运算总结2.判断字符是否唯一3.丢失的数字4.两整数之和5.只出现一次的数字II6.消失的两个数字 1.常见的位运算总结 2.判断字符是否唯一 链接: link class Solution { public:bool isUnique(string astr) {if(astr.size() >…

求平面连接线段组成的所有最小闭合区间

这个功能确实非常实用&#xff0c;我在过去开发地面分区编辑器时就曾应用过这一算法。最近&#xff0c;在新产品的开发中再次遇到了类似的需求。尽管之前已经实现过&#xff0c;但由于长时间未接触&#xff0c;对算法的具体细节有所遗忘&#xff0c;导致重新编写时耗费了不少时…

Spring Boot开发入门教程

简介 Spring Boot是一个开源的Java基础框架&#xff0c;用于创建独立、生产级的基于Spring框架的应用程序。通过Spring Boot&#xff0c;你可以轻松地创建独立的、生产级的Spring应用程序。 环境准备 Java开发环境&#xff1a;确保你的机器上安装了Java 8或更高版本。Maven…

虚拟化数据恢复—XenServer虚拟机中SQL Server数据库数据恢复案例

服务器虚拟化数据恢复环境&#xff1a; 某品牌720服务器中有一组通过同品牌、型号为H710P的RAID卡4块STAT硬盘组建的RAID10磁盘阵列。上层部署XenServer虚拟化平台。1台Windows Server操作系统虚拟机&#xff0c;该虚拟机有2块虚拟磁盘&#xff08;系统盘数据盘&#xff09;&am…

2024年【流动式起重机司机】模拟考试及流动式起重机司机证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 流动式起重机司机模拟考试考前必练&#xff01;安全生产模拟考试一点通每个月更新流动式起重机司机证考试题目及答案&#xff01;多做几遍&#xff0c;其实通过流动式起重机司机模拟考试题很简单。 1、【多选题】( )和…

移动应用开发:实现简易调查问卷

文章目录 前言一&#xff0c;创建SurveyActivity活动二&#xff0c;设计UI三&#xff0c;创建字符串资源文件四&#xff0c;编写活动代码五&#xff0c;更新 AndroidManifest.xml六&#xff0c;运行测试 前言 在Android Studio中开发一个调查问卷界面思路解析&#xff1a; 创建…

深度学习-图像评分实验(TensorFlow框架运用、读取处理图片、模型建构)

目录 0、实验准备 ①实验环境 ②需要下载的安装包 ③注意事项&#xff08;很关键&#xff0c;否则后面内容看不懂&#xff09; ④容易出现的问题 1、查看数据并读取数据。 2、PIL库里的Image包进行读取&#xff08;.resize更改图片尺寸&#xff0c;并将原始数据归一化处…

Intern大模型训练营(五):书生大模型全链路开源体系笔记

观看视频&#xff0c;可以比较详细地了解到书生大模型全链路开源体系。 其中有几个印象比较深的点&#xff1a; 这张图讲述了书生浦语大模型开源的发展史&#xff0c;同时与主流的llama和Chatgpt模型进行比较&#xff0c;可以看出在参数上&#xff0c;InterLM在努力追赶甚至超…

《 C++ 修炼全景指南:十九 》想懂数据库?深入 B 树的世界,揭示高效存储背后的逻辑

摘要 本文深入探讨了 B 树的原理、操作、性能优化及其实际应用。B 树作为一种平衡多路树结构&#xff0c;因其高效的查找、插入和删除操作广泛应用于数据库与文件系统中。文章首先介绍了 B 树的定义与性质&#xff0c;并详细阐述了节点分裂、合并等核心操作的实现方法。接着&a…

开源模型应用落地-glm模型小试-glm-4-9b-chat-批量推理(二)

一、前言 GLM-4是智谱AI团队于2024年1月16日发布的基座大模型&#xff0c;旨在自动理解和规划用户的复杂指令&#xff0c;并能调用网页浏览器。其功能包括数据分析、图表创建、PPT生成等&#xff0c;支持128K的上下文窗口&#xff0c;使其在长文本处理和精度召回方面表现优异&a…

libgdiplus在MacOS M1上问题:Unable to load shared library ‘libgdiplus‘

libgdiplus在MacOS M1上问题&#xff1a;Unable to load shared library libgdiplus 问题解决步骤1步骤2 问题 在mac上的pycharm中执行下面的代码时出现下面的错误 slide.get_thumbnail( RuntimeError: Proxy error(TypeInitializationException): The type initializer for…

大健康零售行业帮助中心的构建与客户服务优化

在大健康零售行业&#xff0c;客户服务的质量直接影响着企业的品牌形象和市场竞争力。随着数字化转型的推进&#xff0c;构建一个高效、智能的帮助中心成为了提升客户服务和满意度的关键。本文将分析大健康零售行业如何通过构建帮助中心来优化客户服务&#xff0c;并提升客户满…

typescript 补充

文章目录 Pick<T, K> 从 T 中挑选部分属性构成新类型Partial<T>&#xff1a;将类型的所有属性变为可选Required<T>&#xff1a;将类型的属性变为必选。Omit<T, K>&#xff1a;从 T 中移除部分属性构成新类型。Readonly<T>&#xff1a;将类型的属…

Git介绍以及SSH配置

目录 1. Git介绍 1.1 Git的基本原理 1.2 Git的主要功能 1.3 Git的优点 1.4 Git的缺点 2. Git安装 3. SSH配置 1. Git介绍 Git是一款功能强大的分布式版本控制系统&#xff0c;最初由Linux操作系统的开发者Linus Torvalds在2005年开发&#xff0c;用于管理Linux内核的源代…

java多线程sleep() 和 wait() 有什么区别?

大家好&#xff0c;我是锋哥。今天分享关于【java多线程sleep() 和 wait() 有什么区别?】面试题。希望对大家有帮助&#xff1b; java多线程sleep() 和 wait() 有什么区别? 在Java中&#xff0c;sleep() 和 wait() 都是多线程编程中常用的控制线程执行的方法。它们看似有相似…

从无音响Windows 端到 有音响macOS 端实时音频传输播放

以下是从 Windows 端到 macOS 端传输音频的优化方案&#xff0c;基于上述链接中的思路进行调整&#xff1a; Windows 端操作 安装必要软件 安装 Python&#xff08;确保版本兼容且已正确配置环境变量&#xff09;。安装 PyAudio 库&#xff0c;可通过 pip install pyaudio 命令…

测度论原创(三)

Morden Prob 文章目录 Morden ProbWeek3多维扩展和随机向量定理3.1推论&#xff1a;random variable的变换定理3.2 连续函数的可测性定理3.3 可测函数的线性组合关于拓展实数集的延伸定理3.4 可测函数的极限依旧为可测性随机变量的概率律&#xff08;Law of X X X&#xff09;…

【C++】C++移动语义、左值右值、左值引用右值引用、移动构造函数、std::move、移动赋值操作符

二十五、C移动语义、左值和右值、左值引用右值引用、移动构造函数、std::move、移动赋值操作符 本部分讨论一些更高级的C特性&#xff1a;C移动语义。但是讲移动语义之前我们得先了解什么左值右值、左值引用和右值引用。 1、C的左值和右值、左值引用和右值引用左值是有地址的…

uniapp实现H5和微信小程序获取当前位置(腾讯地图)

之前的一个老项目&#xff0c;使用 uniapp 的 uni.getLocation 发现H5端定位不准确&#xff0c;比如余杭区会定位到临平区&#xff0c;根据官方文档初步判断是项目的uniapp的版本太低。 我选择的方式不是区更新uniapp的版本&#xff0c;是直接使用高德地图的api获取定位。 1.首…