elementUI 点击弹出时间 date-picker

news/2024/11/6 7:39:32 标签: elementui, 前端, javascript

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

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

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

以下是实现参考:

javascript"><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.niftyadmin.cn/n/5740579.html

相关文章

Docker-- cgroups资源控制实战

上一篇&#xff1a;容器化和虚拟化 什么是cgroups&#xff1f; cgroups是Linux内核中的一项功能&#xff0c;最初由Google的工程师提出&#xff0c;后来被整合进Linux内核; 它允许用户将一系列系统任务及其子任务整合或分隔到按资源划分等级的不同组内&#xff0c;从而为系统…

qt QFontDialog详解

1、概述 QFontDialog 是 Qt 框架中的一个对话框类&#xff0c;用于选择字体。它提供了一个可视化的界面&#xff0c;允许用户选择所需的字体以及相关的属性&#xff0c;如字体样式、大小、粗细等。用户可以通过对话框中的选项进行选择&#xff0c;并实时预览所选字体的效果。Q…

蓝桥杯2021年题解(IP补充)

问题&#xff1a;&#xff08;填空题&#xff09; 小蓝的IP地址为 192.168.*.21&#xff0c;其中 * 是一个数字&#xff0c;请问这个数字最大可能是多少&#xff1f; 答案&#xff1a;255 在IP地址中&#xff0c;每个数字的范围是0&#xff5e;255&#xff0c;所以*最大是25…

鸿蒙网络编程系列43-仓颉版HttpRequest下载文件示例

1. HttpRequest文件下载简介 在本系列的第10篇文章《鸿蒙网络编程系列10-使用HttpRequest下载文件到本地示例》中&#xff0c;使用ArkTS语言在API 9环境下演示了基于HttpRequest进行文件下载的功能&#xff0c;本章将使用仓颉语言在API 12环境下实现类似的功能。因为本示例使用…

[mysql]修改表和课后练习

目录 DDL数据定义语言 添加一个字段 添加一个字段到最后一个 添加到表中的第一个一个字段 选择其中一个位置: 修改一个字段:数据类型,长度,默认值(略) 重命名一个字段 删除一个字段 重命名表 删除表 清空表 DCL中事务相关内容 DCL中COMMIT和ROLLBACK的讲解 对比TR…

Zookeeper运维秘籍:四字命令基础、详解及业务应用全解析

文章目录 一、四字命令基础二、四字命令详解三、四字命令的开启与配置四、结合业务解读四字命令confconsenvi命令Stat命令MNTR命令ruok命令dump命令wchswchp ZooKeeper&#xff0c;作为一款分布式协调服务&#xff0c;提供了丰富的四字命令&#xff08;也称为四字短语&#xff…

Flutter下拉刷新上拉加载的简单实现方式一

方式一&#xff1a;RefreshIndicatorListView实现 import package:flutter/material.dart;class SimpleRefreshDemoPage extends StatefulWidget {const SimpleRefreshDemoPage({super.key});overrideState<StatefulWidget> createState() {return _SimpleRefreshDemoPa…

音视频入门基础:FLV专题(24)——FFmpeg源码中,获取FLV文件视频信息的实现

一、引言 通过FFmpeg命令可以获取到FLV文件的视频压缩编码格式、色彩格式&#xff08;像素格式&#xff09;、分辨率、码率、帧率信息&#xff1a; 而由《音视频入门基础&#xff1a;FLV专题&#xff08;9&#xff09;——Script Tag简介》和《音视频入门基础&#xff1a;FLV专…