日期选择器多选换行

html 复制代码
<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>
typescript 复制代码
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';
		}
	});
}
css 复制代码
.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;
}
相关推荐
web守墓人40 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架