elementUI 点击弹出时间 date-picker

news2024/11/6 7:29:19

 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,点击时弹出其功能弹窗! 

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

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

相关文章

柯桥topik考级韩语培训【韩语干货】表存在的에和에게有什么区别?

相同点 都可以接在体词后&#xff0c;表示存在的地点、场所&#xff0c;以及所有者。 例如&#xff1a; 1&#xff09;여동생이 집에 있어요. 妹妹在家。 2&#xff09; 식당이 도서관 뒤에 있다. 食堂在图书馆后面。 3&#xff09; 언니에게 고급 화장품이 있다. 姐姐有高级…

使用 ABAP GIT 发生 IF_APACK_MANIFEST dump

错误重现 使用经典的 ABAP 系统运行 ZABAPGIT 或者 ZABAPGIT_STANDALONE然后添加在线或者离线项目点击 PullShort dump SYNTAX_ERROR Dump 界面&#xff1a; 解决方案 它发生在 CREATE OBJECT lo_manifest_provider TYPE (ls_manifest_implementation-clsname) 语句中。 该语…

多商户电商平台开发指南:基于直播带货系统源码的搭建方案详解

本篇文章&#xff0c;小编将详细解析如何利用直播带货系统源码&#xff0c;快速搭建一套多商户电商平台的解决方案。 一、直播带货系统在多商户电商平台中的应用价值 在多商户电商平台中&#xff0c;直播带货系统可以帮助商家&#xff1a; 1.增加用户互动 2.提升转化率 3.…

【TextIn:开源免费的AI智能文字识别产品(通用文档智能解析识别、OCR识别、文档格式转换、篡改检测、证件识别等)】

TextIn&#xff1a;开源免费的AI智能文字识别产品&#xff08;通用文档智能解析识别、OCR识别、文档格式转换、篡改检测、证件识别等&#xff09; 产品的官网&#xff1a;TextIn官网 希望感兴趣以及有需求的小伙伴们多多了解&#xff0c;因为这篇文章也是源于管网介绍才产出的…

(C++回溯算法)微信小程序“开局托儿所”游戏

问题描述 给定一个矩阵 A ( a i j ) m n \bm A(a_{ij})_{m\times n} A(aij​)mn​&#xff0c;其中 a i j ∈ { 1 , 2 , ⋯ , 9 } a_{ij}\in\{1,2,\cdots,9\} aij​∈{1,2,⋯,9}&#xff0c;且满足 ∑ i 1 m ∑ j 1 n a i j \sum\limits_{i1}^m\sum\limits_{j1}^na_{ij} i…

Java学习Day57:碧水金睛兽!(Spring Cloud微服务1.0)

1.微服务入门 (1).单体架构与分布式架构 单体架构&#xff1a; 将业务的所有功能集中在一个项目中开发&#xff0c;打成一个包部署优点&#xff1a; 架构简单、部署成本低 &#xff1b; 缺点&#xff1a; 耦合度高项目打包部署到Tomcat&#xff0c;用户直接访问。用户量增加后…

Golang | Leetcode Golang题解之第541题反转字符串II

题目&#xff1a; 题解&#xff1a; func reverseStr(s string, k int) string {t : []byte(s)for i : 0; i < len(s); i 2 * k {sub : t[i:min(ik, len(s))]for j, n : 0, len(sub); j < n/2; j {sub[j], sub[n-1-j] sub[n-1-j], sub[j]}}return string(t) }func min…

★ C++进阶篇 ★ C++11(上)

Ciallo&#xff5e;(∠・ω< )⌒☆ ~ 今天&#xff0c;我将和大家一起学习C11 ~ ​❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️ 澄岚主页&#xff1a;椎名澄嵐-CSDN博客 C基础篇专栏&#xff1a;★ C基础篇 ★_椎名澄嵐的博客-CSDN博客 C进阶篇专栏&#xff…

【Linux 28】应用层协议 - HTTPS

文章目录 &#x1f308; 一、HTTPS 相关概念⭐ 1. 什么是 HTTPS⭐ 2. 加密 & 解密 & 密钥⭐ 3. 常见的加密方式⭐ 4. 数据摘要 & 数据指纹⭐ 5. 初识数字签名 &#x1f308; 二、HTTPS 的加密方案探究⭐ 1. 方案一&#xff1a;只使用对称加密⭐ 2. 方案二&#xff…

qt QFileDialog详解

1、概述 QFileDialog是Qt框架中的一个对话框类&#xff0c;用于提供一个标准的文件选择对话框。它允许用户浏览文件系统&#xff0c;选择一个或多个文件或目录&#xff0c;以及指定文件名。QFileDialog支持本地文件系统和远程文件系统&#xff08;如通过FTP或SFTP访问的文件系…

C语言不同基本数据类型占用字节大小和取值范围

具体请前往&#xff1a;C语言各种基本数据类型字节大小和取值范围

Vue3:新特性详解

本文目录&#xff1a; 1.特性函数setup2.Ref 语法3.Reactive 函数4.Vue3 生命周期5.侦测变化 - watch6.Vue3的模块化开发7.弹窗类组件优化&#xff1a;Teleport8.异步组件优化&#xff1a;Suspense9.全局API优化 1.特性函数setup 1、setup函数是处于 生命周期函数 beforeCreate…

Linux scp命令 | 菜鸟教程-从本地复制到远程/从远程复制到本地

目录 Linux scp命令 语法 实例 1、从本地复制到远程 2、从远程复制到本地 说明 文章来源&#xff1a;Linux scp命令 | 菜鸟教程 Linux scp命令 nux scp 命令用于 Linux 之间复制文件和目录。 scp 是 secure copy 的缩写, scp 是 linux 系统下基于 ssh 登陆进行安全的远…

计算机毕业设计Python+大模型膳食推荐系统 知识图谱 面向慢性病群体的膳食推荐系统 健康食谱推荐系统 机器学习 深度学习 Python爬虫 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

大数据集群中实用的三个脚本文件解析与应用

目录 一、jps - cluster.sh 脚本文件 &#xff08;一&#xff09;背景与功能 &#xff08;二&#xff09;使用方法 二、集群文件分发脚本 xsync.sh &#xff08;一&#xff09;背景与问题 &#xff08;二&#xff09;功能与实现原理 &#xff08;三&#xff09;脚本编写…

【数据分享】1981-2024年我国逐日平均气温栅格数据(免费获取)

气象数据一直是一个价值很高的数据&#xff0c;它被广泛用于各个领域的研究当中。这其中&#xff0c;又以平均气温数据最为常用&#xff01;之前我们分享过来源于美国国家海洋和大气管理局&#xff08;NOAA&#xff09;下设的国家环境信息中心(NCEI)发布的1929-2024年全球站点的…

多模态PaliGemma——Google推出的基于SigLIP和Gemma的视觉语言模型

前言 本文怎么来的呢&#xff1f;其实很简单&#xff0c;源于上一篇文章《π0——用于通用机器人控制的流匹配VLA模型&#xff1a;一套框架控制7种机械臂(改造了PaliGemma和ACT的3B模型)》中的π0用到了PaliGemma 故本文便来解读下这个PaliGemma 第一部分 PaliGemma 1.1 Pal…

开源模型应用落地-glm模型小试-glm-4-9b-chat-Gradio集成(三)

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

ABAP开发学习——OLE

目录 1.概览 2.OEL的实现方式 3.OLE的配置 4.OLE的实现 4.1 OLE Demo 4.2 OLE实现的步骤 5.OLE实现样例 5.1 OLE中的的类型转换 5.2 变量定义 5.3 创建对象 5.4 表单页的操作 5.5 设置文件保存路径 5.6 文件是否可见 5.7 单元格操作 5.7.1 给单元格赋值 5.7.2…

在Java中,实现数据库连接通常使用JDBC

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把手教你开发炫酷的vbs脚本制作(完善中……&#xff09; 4、牛逼哄哄的 IDEA编程利器技巧(编写中……&#xff09; 5、面经吐血整理的 面试技…