当前位置: 首页 > news >正文

日期选择器多选换行

<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.lryc.cn/news/111889.html

相关文章:

  • NodeJS原型链污染ctfshow_nodejs
  • 18. SpringBoot 如何在 POM 中引入本地 JAR 包
  • vue2-$nextTick有什么作用?
  • python自动收集粘贴板
  • Vue3_语法糖—— <script setup>以及unplugin-auto-import自动引入插件
  • 2023-08-06力扣做过了的题
  • 进程间通信之管道
  • f12 CSS网页调试_css样式被划了黑线怎么办
  • vue-制作自动滚动效果
  • [国产MCU]-BL602-开发实例-DMA数据传输
  • Redis压缩列表
  • 【SA8295P 源码分析】62 - Android GVM Kernel 内核 make bootimage 过程分析
  • 机器学习——SMO算法推导与实践
  • mac的终端通过code .指令快速启动vscode
  • 前端系统使用iframe下载文件
  • RabbitMQ - 简单案例
  • 《吐血整理》高级系列教程-吃透Fiddler抓包教程(30)-Fiddler如何抓Android7.0以上的Https包-番外篇
  • 服务器被攻击了怎么办?
  • P1156 垃圾陷阱(背包变形)
  • [Docker实现测试部署CI/CD----构建成功后钉钉告警(7)]
  • UE5 半透明覆层材质
  • 在Raspberry Pi 4上安装Ubuntu 20.04 + ROS noetic(不带显示器)
  • CommStudio for .NET Crack
  • 蓝桥杯上岸考点清单 (冲刺版)!!!
  • AI一键生成短视频
  • 基于MATLAB长时间序列遥感数据分析(以MODIS数据处理为例)
  • postgresql之内存池-AllocsetContext
  • QT 使用单例模式
  • 接口测试——postman接口测试(三)
  • react中hooks的理解与使用