el-date-picker 组件 监听输入的内容 并按照时间格式 格式化
这个时间选择组件在输入的时候是监听不到输入的值的,所以我们在外层再套个div,然后用获取焦点事件去操作dom
页面中
<div id="inParkingData"><el-date-pickerv-model="indateRange"size="small"value-format="yyyy-MM-dd HH:mm:ss"type="datetimerange"range-separator="-"start-placeholder="开始日期"end-placeholder="结束日期":default-time="['00:00:00', '23:59:59']"@focus="inParkingDataFocus('inParkingData', indateRange)"></el-date-picker>
</div>
js文件中
// 获取 dom 方法
export function gainFocus(e, data) {console.log(e, data, "==11==");var _self = this;var inDataInput = document.getElementById(e).getElementsByTagName("input")[0];var outDataInput = document.getElementById(e).getElementsByTagName("input")[1];inDataInput.addEventListener("input", inTapEvent);outDataInput.addEventListener("input", outTapEvent);function inTapEvent() {console.log(inDataInput.value);setTimeout(() => {inDataInput.value = disposeData(inDataInput.value);}, 100);Vue.set(data, 0, inDataInput.value);}function outTapEvent() {setTimeout(() => {outDataInput.value = disposeData(outDataInput.value);}, 100);Vue.set(data, 1, outDataInput.value);}return data;
}// 更改格式
function disposeData(str) {var value = str.split("");if (value.length == 4) {value.splice(4, 0, "-");}if (value.length == 7) {value.splice(7, 0, "-");}if (value.length == 10) {value.splice(10, 0, " ");}if (value.length == 13) {value.splice(13, 0, ":");}if (value.length == 16) {value.splice(16, 0, ":");}return value.join("");
}
相关文章:
el-date-picker 组件 监听输入的内容 并按照时间格式 格式化
这个时间选择组件在输入的时候是监听不到输入的值的,所以我们在外层再套个div,然后用获取焦点事件去操作dom 页面中 <div id"inParkingData"><el-date-pickerv-model"indateRange"size"small"value-format"…...
组件通信$refs | $parent |$root
父组件传值子组件用Props 子组件传值父组件用$emit 父组件直接还可以直接取子组件的值用$refs 父组件直接从子子组件中获取值$refs 不建议使用会增加组件之间的耦合度,一般用于第三方插件的封装 ref如果绑定在dom节点上,拿到的就是原生dom节点。 ref如…...
springboot中@Async的使用
1.AsyncAnnotationBeanPostProcessor是主要逻辑类 (1)AsyncAnnotationBeanPostProcessor实现BeanFactoryAware接口 在setBeanFactory(BeanFactory beanFactory)中初始化advisorAsyncAnnotationAdvisor() (2)AsyncAnnotationBeanPostProcessor实现BeanPostProcessor接口 在p…...
学C++从CMake学起
Cmake在此引入c17编译器,就可以使用c17的新特性了。 c17定义了一些算法,都定义在了下面这个头文件里。 #include <numeric> 通过redurce函数求和 将9行的std::plus{}换成std::times{}就是相乘。...
lv8 嵌入式开发-网络编程开发 20 域名解析与http服务实现原理
目录 1 域名解析 2 如何实现万维网服务器? 2.1 HTTP 的操作过程 2.2 万维网服务器实现 1 域名解析 域名解析gethostbyname函数 主机结构在 <netdb.h> 中定义如下: struct hostent {char *h_name; /* 官方域名 */char **h_alias…...
只要路由器有WPS按钮,佳能打印机连接到Wi-Fi网络的方法就很简单
佳能打印机是很好的设备,可以让你从智能手机、电脑或平板电脑打印照片。它们还提供其他功能,如扫描文档和复制图像。 最新的型号还允许你连接到Wi-Fi,因此你不需要使用电线将设备连接到打印机。 Wi-Fi是通过本地网络传输数据的标准方式。它…...
Cmake输出git内容方式
实现背景 在定位问题时,固件无法获取当前设备中版本的详细信息,无法准确获取版本具体内容 输出效果 实现方式 以下是基于Cmake的语法实现 在CMake中获取git信息,可以通过execute_process命令运行git命令并将结果保存在一个变量中。然后可…...
实现多余内容变成省略号
实现效果 代码 <p class"item-content">{{ item.content }}</p>样式 .item-content {white-space: nowrap;/* 禁止换行 */overflow: hidden;/* 隐藏溢出部分 */text-overflow: ellipsis;/* 使用省略号表示溢出部分 */ }...
WAL 模式(PostgreSQL 14 Internals翻译版)
性能 当服务器正常运行时,WAL文件不断被写入磁盘。但是,这些写操作是顺序的:几乎没有随机访问,因此即使是HDD也可以处理这个任务。由于这种类型的加载与典型的数据文件访问非常不同,因此有必要为WAL文件设置一个单独的物理存储&a…...
2023年信息科学与工程学院学生科协第二次软件培训
2023年信息科学与工程学院学生科协第二次软件培训 文章目录 2023年信息科学与工程学院学生科协第二次软件培训一维数组数组的概念定义格式一维数组的访问例题:练习题: 数组元素数量一维数组的初始化 二维数组定义格式二维数组的访问二维数组的存储结构二…...
渗透测试tomcat错误信息泄露解决办法
解决方法: 1、使用tomcat8.5.16,会重定向非法url到登录url 2、配置server.xml,加上 <Valve className"org.apache.catalina.valves.ErrorReportValve" showReport"false" showServerInfo"false" />配置…...
notes_NLP
RNN > LSTM, GRU model特点RNNLSTMinputforgetputput;GRUresetupdate;参数比LSTM少,计算效率更高; 循环神经网络(RNN/LSTM/GRU) 人人都能看懂的GRU transformer > self-attention 根据Query和Key计…...
内存分段、分页
大家好,我叫徐锦桐,个人博客地址为www.xujintong.com。平时记录一下学习计算机过程中获取的知识,还有日常折腾的经验,欢迎大家访问。 前言 每个进程都有一套自己的虚拟地址,尽管进程可能有相同的虚拟地址,…...
Python-pptx教程之一从零开始生成PPT文件
简介 python-pptx是一个用于创建、读取和更新PowerPoint(.pptx)文件的python库。 典型的用途是根据动态内容(如数据库查询、分析数据等),将这些内容自动化生成PowerPoint演示文稿,将数据可视化,…...
k8s 使用ingress-nginx访问集群内部应用
k8s搭建和部署应用完成后,可以通过NodePort,Loadbalancer,Ingress方式将应用端口暴露到集群外部,提供外部访问。 缺点: NodePort占用端口,大量暴露端口非常不安全,并且有端口数量限制【不推荐】…...
企业数据泄露怎么办?
随着数字化时代的到来,威胁企业数据安全的因素越来越多。一旦机密数据泄露,不仅会对企业造成巨大的经济损失,还会对企业的声誉和客户信任度造成严重影响。发生数据泄露情况时,企业该怎样应对? 1.确认数据泄露 确认是…...
GoLong的学习之路(一)语法之变量与常量
目录 GoLang变量批量声明变量的初始化类型推导短变量声明匿名变量 常量iota(特殊)(需要重点记忆) GoLang go的诞生为了解决在21世纪多核和网络化环境越来越复杂的变成问题而发明的Go语言。 go语言是从Ken Thomepson发明的B语言和…...
Go-Python-Java-C-LeetCode高分解法-第十一周合集
前言 本题解Go语言部分基于 LeetCode-Go 其他部分基于本人实践学习 个人题解GitHub连接:LeetCode-Go-Python-Java-C 欢迎订阅CSDN专栏,每日一题,和博主一起进步 LeetCode专栏 我搜集到了50道精选题,适合速成概览大部分常用算法 突…...
封装axios的两种方式
作为前端工程师,经常需要对axios进行封装以满足复用的目的。在不同的前端项目中使用相同的axios封装有利于保持一致性,有利于数据之间的传递和处理。本文提供两种对axios进行封装的思路。 1. 将请求方式作为调用参数传递进来 首先导入了axios, AxiosIn…...
【自然语言处理】NLTK库的概念和作用
文章目录 一、NLTK库介绍二、NLTK库的使用2.1 初级使用2.2 中级使用 参考资料 一、NLTK库介绍 Natural Language Toolkit (NLTK)是一个广泛使用的Python自然语言处理工具库,由Steven Bird、Edward Loper和Ewan Klein于2001年发起开发。NLTK的目的是为自然语言处理&…...
零基础入门:借助快马平台生成你的第一份单元测试代码
作为一个刚接触软件测试的新手,我最近在InsCode(快马)平台上完成了一个Python单元测试的入门项目,整个过程比想象中顺利很多。这个"计算器单元测试示例"特别适合零基础学习者,我来分享一下具体的学习路径和收获。 理解单元测试的基…...
双蒙皮声纳导流罩(Sonar Domes)技术情报报告
1. 概述 声纳导流罩(Sonar Dome)是安装在舰艇艏部或潜艇前端的流线型外壳,用于保护声纳换能器阵列,同时确保声学性能和水动力性能。现代声纳导流罩采用双蒙皮结构(Double-Skin Design),兼顾结构强度、轻量化、声学透明性和维护便捷性。 2. 双蒙皮结构设计特点 2.1 柯蒂…...
从‘电池’到‘胡萝卜’:聊聊构建YOLO生活垃圾数据集时遇到的坑与收获
从‘电池’到‘胡萝卜’:构建YOLO生活垃圾数据集的实战思考 去年夏天,我在自家小区做垃圾分类志愿者时,发现一个有趣现象:居民们对"1号电池属于有害垃圾"这类规则记得很牢,但面对"半个胡萝卜该扔哪个桶…...
如何快速在浏览器中搭建全功能Office办公环境:SE Office扩展终极指南
如何快速在浏览器中搭建全功能Office办公环境:SE Office扩展终极指南 【免费下载链接】se-office se-office扩展,提供基于开放标准的全功能办公生产力套件,基于浏览器预览和编辑office。 项目地址: https://gitcode.com/gh_mirrors/se/se-o…...
文档即测试:我们如何用Markdown写自动化用例
在软件测试领域,沟通的鸿沟、文档的滞后性与维护的复杂性,一直是阻碍自动化测试效率提升的痛点。传统的测试脚本虽然功能强大,但可读性往往局限于开发与少数资深测试人员,业务方与项目管理者难以直观理解测试意图与覆盖范围。随着…...
5步解锁全球化内容生产:MoneyPrinterTurbo多语言视频创作全指南
5步解锁全球化内容生产:MoneyPrinterTurbo多语言视频创作全指南 【免费下载链接】MoneyPrinterTurbo 利用AI大模型,一键生成高清短视频 Generate short videos with one click using AI LLM. 项目地址: https://gitcode.com/GitHub_Trending/mo/MoneyP…...
低代码平台扩展性有多重要?没有这能力,迟早要重构
在企业数字化转型的浪潮中,低代码平台凭借“快速搭建、降低门槛”的核心优势,成为众多企业实现高效开发的首选工具。不少企业在低代码平台选型时,往往过度关注“开发速度”“易用性”等表层指标,却忽略了一个决定平台生命周期的核…...
Tsuru容器网络终极性能测试指南:7大CNI插件深度对比与优化策略
Tsuru容器网络终极性能测试指南:7大CNI插件深度对比与优化策略 【免费下载链接】tsuru Open source and extensible Platform as a Service (PaaS). 项目地址: https://gitcode.com/gh_mirrors/ts/tsuru Tsuru作为开源可扩展的PaaS平台,其容器网络…...
3大突破!网盘下载加速工具让你的文件获取效率倍增
3大突破!网盘下载加速工具让你的文件获取效率倍增 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ,支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘…...
闲鱼AI客服终极指南:7×24小时自动化值守完整教程
闲鱼AI客服终极指南:724小时自动化值守完整教程 【免费下载链接】XianyuAutoAgent 智能闲鱼客服机器人系统:专为闲鱼平台打造的AI值守解决方案,实现闲鱼平台724小时自动化值守,支持多专家协同决策、智能议价和上下文感知对话。 …...
