日期选择器多选换行

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;
}
相关推荐
jingling5554 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录9 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000010 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl11 分钟前
深度剖析Kafka读写机制
前端
FogLetter12 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan12 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan13 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan15 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录15 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee15 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化