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的目的是为自然语言处理&…...
Agent可观测性工程:监控、追踪与告警的最佳实践
Agent可观测性工程:监控、追踪与告警的最佳实践 一、 引言 (Introduction) (一)钩子 (The Hook) 你是否有过这种令人抓狂的经历?凌晨三点,手机突然弹出刺耳的告警提示音,内容是“你的金融风控Agent集群延迟飙升至27秒,核心交易拒单率突破5‰阈值!”。你从床上弹起来,…...
为什么你的STM32 DMA传输失败了?__HAL_LINKDMA宏的隐藏陷阱与解决方案
为什么你的STM32 DMA传输失败了?__HAL_LINKDMA宏的隐藏陷阱与解决方案 在STM32开发中,DMA(直接内存访问)传输是提升外设数据吞吐效率的关键技术。然而,许多开发者在实际项目中都会遇到DMA传输失败的问题,而…...
Claude Code 最佳实践:构建可验证、可治理、可扩展的生产级分布式系统
Claude Code 最佳实践:构建可验证、可治理、可扩展的生产级分布式系统 在很多团队的第一印象里,Claude Code 只是“更强一点的命令行编码助手”。但一旦进入中大型研发场景,你很快会发现,真正决定它价值上限的,不是单次补全能力,而是它是否能够被纳入一套可验证、可治理…...
批量新建文件夹工具:两种模式与重名策略怎么选
在 Windows 上做项目资料归档、测试用例目录、素材库初始化时,“先把一套文件夹结构建出来”是很常见的动作。手动右键新建很容易漏、很容易层级点错,也很难复用。这里记录一下【批量新建文件夹工具】的用法要点(只讲界面能力与参数选择&…...
实战指南:基于快马平台与contextmenumanager,为你的数据可视化图表添加专业右键菜单功能
实战指南:基于快马平台与contextmenumanager,为你的数据可视化图表添加专业右键菜单功能 最近在做数据可视化项目时,发现很多用户反馈希望在图表上直接操作,而不是到处找功能按钮。于是研究了一下如何给Chart.js图表添加右键菜单…...
JetBrains GoLand 2026.1 (macOS, Linux, Windows) - 为 Go 开发者打造的完整 IDE
JetBrains GoLand 2026.1 (macOS, Linux, Windows) - 为 Go 开发者打造的完整 IDE JetBrains 跨平台开发者工具 请访问原文链接:https://sysin.org/blog/jetbrains-goland/ 查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org Jet…...
基于粒子群算法的主动配电网经济优化调度系统分析
基于IEEE33的主动配电网优化,采用IEEE33节点配电网进行仿真,搭建了含风光,储能,柴油发电机和燃气轮机的配电网经济调度模型,以总的运行成本最小为目标,考虑了储能以及潮流等约束,采用粒子群算法…...
保姆级教程:为嵌入式Linux(ARM/AArch64)交叉编译带完整符号支持的Perf工具
ARM架构嵌入式Linux系统性能调优实战:Perf工具深度定制指南 在嵌入式系统开发中,性能优化往往是最具挑战性的环节之一。当你的应用在ARM或AArch64架构的嵌入式设备上运行时出现卡顿、延迟或资源耗尽,传统的打印调试和日志分析往往难以定位深…...
工厂智能电表远程抄表系统C#源代码案例:实时监控与报表生成功能
工厂智能电表远程抄表系统项目,成功案例,源代码,C#语言,可监控24小时厂区总用电量波形图,单表24小时用电量波形图。 可自动导出多种不同形式excel表,厂区单月各表用电量,厂区各表电量值…...
G-Helper华硕笔记本控制中心:告别臃肿,拥抱极致轻量化
G-Helper华硕笔记本控制中心:告别臃肿,拥抱极致轻量化 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF…...
