日期选择器多选换行

<el-form-item label="日期选择"><div class="multi-date-picker"><div class="date-item"><span class="dateIcon"><el-icon><Calendar /></el-icon></span><span class="dateItem">{{ selectedList.toString() }}</span></div><!--把日期选择器隐藏起来 --><el-date-picker class="datePicker" v-model="formData.abroadHolidayInfo" value-format="YYYYMMDD" type="dates" @change="addDate" @blur="handleDatePickerFocus" placeholder="请选择日期"></el-date-picker></div>
</el-form-item>
setup(props:any) {const state = reactive<any>({selectedList: ['请选择'], // 用来展示})function handleDatePickerFocus() {nextTick(() => {const divInner = document.querySelector('.date-item') as HTMLHtmlElement;const inputInner = document.querySelector('.datePicker .el-input__inner') as HTMLHtmlElement;if (inputInner) {inputInner.style.width = '220px';setTimeout(() => {// 让日期选择器是高度跟div保持一致inputInner.style.height = `${divInner.offsetHeight}px`;}, 100);}});}function addDate() {const dateItemHTML = document.querySelector('.dateItem') as HTMLHtmlElement;if (state.formData.abroadHolidayInfo) {dateItemHTML.style.color = '#606266';dateItemHTML.style.fontSize = '12px';// 处理一下格式state.selectedList = state.formData.abroadHolidayInfo.map((date: any) => {return date.substring(0, 4) + '-' + date.substring(4, 6) + '-' + date.substring(6);});} else {dateItemHTML.style.color = '#c4c7cf';dateItemHTML.style.fontSize = '13px';state.selectedList = ['请选择'];}}onMounted(() => {const dateItemHTML = document.querySelector('.dateItem') as HTMLHtmlElement;if (state.formData.abroadHolidayInfo) {dateItemHTML.style.color = '#606266';} else {dateItemHTML.style.color = '#c4c7cf';dateItemHTML.style.fontSize = '13px';}});
}
.multi-date-picker {display: flex;
}
.date-item {display: flex;border: 1px solid #dcdfe6;border-radius: 4px;width: 220px;min-height: 32px;font-size: 12px;.dateIcon {display: flex;margin-top: 8px;width: 25px;justify-content: center;color: #c4c7cf;margin-left: 4px;font-weight: bolder;}.dateItem {display: flex;flex: 1;flex-wrap: wrap;color: #606266;padding-right: 10px;}
}
<!--不能写在scoped -->
.datePicker {position: absolute;left: 5px;opacity: 0;
}

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

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

相关文章

【ArcGIS Pro二次开发】(58):数据的本地化存储

在做村规工具的过程中&#xff0c;需要设置一些参数&#xff0c;比如说导图的DPI&#xff0c;需要导出的图名等等。 每次导图前都需要设置参数&#xff0c;虽然有默认值&#xff0c;但还是需要不时的修改。 在使用的过程中&#xff0c;可能会有一些常用的参数&#xff0c;希望…

Sentinel 2.0 微服务零信任的探索与实践

作者&#xff1a;涯客、十眠 从古典朴素的安全哲学谈起 网络安全现状 现在最常见的企业网络安全架构便是在企业网络边界处做安全防护&#xff0c;而在企业网络内部不做安全防范。这确实为企业的安全建设省了成本也为企业提供了一定的防护能力。但是这类比于现实情况的一个小…

单通道 6GSPS 16位采样DAC子卡模块--【资料下载】

FMC147是一款单通道6.4GSPS&#xff08;或者配置成2通道3.2GSPS&#xff09;采样率的12位AD采集、单通道6GSPS&#xff08;或配置成2通道3GSPS&#xff09;采样率16位DA输出子卡模块&#xff0c;该板卡为FMC标准&#xff0c;符合VITA57.4规范&#xff0c;该模块可以作为一个理想…

力扣:54. 螺旋矩阵(Python3)

题目&#xff1a; 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;力扣 示例&#xff1a; 示例 1&#xff1a; 输入&#xff1a;matrix [[1,…

手机便签内容不见了怎么恢复正常?

在日常生活和工作中&#xff0c;很多人都需要随手记录事情&#xff0c;例如家庭琐事、孩子相关的事情、指定时间需要完成的工作任务、会议安排等。当我们需要随时随地记录事情的时候&#xff0c;手机便签应用就是非常不多的选择&#xff0c;我们直接打开手机上的便签APP就可以新…

安全基础 --- https详解 + 数组(js)

CIA三属性&#xff1a;完整性&#xff08;Confidentiality&#xff09;、保密性&#xff08;Integrity&#xff09;、可用性&#xff08;Availability&#xff09;&#xff0c;也称信息安全三要素。 https 核心技术&#xff1a;用非对称加密传输对称加密的密钥&#xff0c;然后…

【多线程】synchronized 原理

1. 写在前面 本章节主要介绍 synchronized 的一些内部优化机制&#xff0c;这些机制存在的目的呢就是让 synchronized 这把锁更高效更好用&#xff01; 2. 锁升级/锁膨胀 JVM 将 synchronized 锁分为以下四种状态&#xff1a; 无锁&#xff0c;偏向锁&#xff0c;轻量级锁&…

服务器测试之GPU shoc-master测试

精简版指导 lspci | grep -i nvidia lspci -s 4f:00.0 -vvv 适用版本 cuda_11.8.0_520.61.05_linux.run cuda-samples-11.8.tar.gz NVIDIA-Linux-x86_64-525.116.04.run 安装&#xff1a; ./NVIDIA-Linux-x86_64-525.116.04.run 查看是否为一拖八&#xff1a;nvidia-smi topo …

算法通关村第四关——最大栈问题解析

力扣716&#xff0c;设计一个最大栈数据结构&#xff0c;既支持栈操作&#xff0c;又支持查找栈中最大元素。 分析&#xff1a; 在最大栈的问题上&#xff0c;除了实现普通栈拥有的方法pop、push、top外&#xff0c;还需要实现getMax方法来找到当前栈里的最大值。为了在最短事件…

js 正则表达式配合replace进行过滤html字符串遇到的性能问题

问题场景复现&#xff1a; 博主要实现一个邮箱列表&#xff0c;其中列表中的每一封邮件都有一个摘要&#xff0c;但是摘要是要自己从后端提供的content内容区自己过滤掉所有&#xff0c;只留下纯文本内容的前面几行作为摘要。 性能问题 当我测试到一个邮箱&#xff0c;其中的…

【CSS】说说对BFC的理解

目录 一、概念 二、BFC的布局规则 三、设置BFC的常用方式 四、BFC的应用场景 1、解决浮动元素令父元素高度坍塌的问题 2、解决非浮动元素被浮动元素覆盖问题 3、解决外边距垂直方向重合的问题 五、总结 一、概念 我们在页面布局的时候&#xff0c;经常出现以下情况&am…

【java】基础——封装

封装是对类提供的方法实现对隐藏信息的操作和访问&#xff0c;但留出了访问的借口&#xff0c;以提高类的信息安全性&#xff1b;包&#xff1a;package 包名; 必须放在源文件的第一行&#xff1b;一个java源文件只能有一个package语句&#xff1b;包名全英文小写&#xff1b;命…

网络安全进阶学习第十二课——SQL手工注入3(Access数据库)

文章目录 注入流程&#xff1a;1、判断数据库类型2、判断表名3、判断列名4、判断列数1&#xff09;判断显示位 5、判断数据长度6、爆破数据内容 注入流程&#xff1a; 判断数据库类型 ——> 判断表名 ——> 判断列名 ——> 判断列名长度 ——> 查出数据。 asp的网…

数池塘(四方向,八方向)深搜

题面 题目描述 农夫约翰的农场可以表示成 NM个方格组成的矩形。由于近日的降雨&#xff0c;在约翰农场上的不同地方形成了池塘。每一个方格或者有积水&#xff08;W&#xff09;或者没有积水&#xff08;.&#xff09;。 农夫约翰打算数出他的农场上共形成了多少池塘。一个池塘…

商用服务机器人公司【Richtech Robotics】申请纳斯达克IPO上市

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;总部位于美国内华达州拉斯维加斯由华人领导的商用服务机器人公司【Richtech Robotics】近期已向美国证券交易委员会&#xff08;SEC&#xff09;提交招股书&#xff0c;申请在纳斯达克IPO上市&am…

Linux的shell脚本常用命令

1、前提 使用shell脚本可以将所要执行的命令行进行汇总&#xff0c;统一执行&#xff0c;制作为脚本工具&#xff0c;简化重复性工作 1.1、常用命令 1.1.1、启动命令 假设我们拥有一个halloWord.sh的脚本&#xff0c;通过cd 命令进入相对应的目录下 ./halloWord.sh1.1.2、…

SpringBoot 依赖管理和自动配置---带你了解什么是版本仲裁

&#x1f600;前言 本篇博文是关于SpringBoot 依赖管理和自动配置&#xff0c;希望能够帮助到您&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您…

linux epoll介绍与代码演示

在Linux系统中,epoll和poll是两种I/O多路复用技术,它们可以让单个线程处理多个I/O事件。 poll是一种比较早的技术,它的工作方式是轮询所有的文件描述符,看哪些文件描述符准备好了I/O操作。这种方式的缺点是,当文件描述符的数量很大时,轮询的开销会很大。 epoll是为了解…

一个Python程序引发的思考

import disdef add(a, b):result a b 2 3return resultdis.dis(add)# dis.opname 是一个列表&#xff0c;它按字节码值的顺序列出了所有的操作名。 print(dis.opname)# dis.opmap 是一个字典&#xff0c;其键是操作名&#xff0c;值是对应的字节码值。 print(dis.opmap)# 列…

关于机器视觉应用开发四大软件薪资分析(华东)

&#xff08;QQ群有答疑&#xff09;视觉人机器视觉-海康机器视觉Visionmaster二次开发课程-零基础小白快速上手VM开发系列课程 现场市场总和占用率我们称作四大软件分别是 1.Visionmaster 2.Halcon 3.Visionpro 4.Opencv 如果大家要详细了解四大软件的应用以及详细情况&a…