vue组件 -- 实现一种小时级时间段选择

最新推荐文章于 2025-06-06 16:46:28 发布

菜菜的康哥

最新推荐文章于 2025-06-06 16:46:28 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： vue.js

本文链接：https://blog.csdn.net/dengkangning1111/article/details/113110390

效果

操作大概是选择一个开始时间和一个结束时间（从左往右选是选择，从右往左是取消），排除已选后计算他们总的时间段。

code

<template>
	<div>
		<div class="hours-container">
			<div v-for="(item, index) in hours" :key="index" class="hours-item">
				<div class="hours-item-header">{
  
  { compItem(item) }}</div>
				<div class="hours-item-value">
					<div
						:class="compClass(2 * item)"
						@click="handleClick(2 * item)"
						@mouseover="handleHover(2 * item)"
					></div>
					<div
						:class="compClass(2 * item + 1)"
						@click="handleClick(2 * item + 1)"
						@mouseover="handleHover(2 * item + 1)"
					></div>
				</div>
			</div>
		</div>
		<div class="tips">{
  
  { tips }}</div>
	</div>
</template>

<script>
/*
* @Description 为了实现24小时区间选择，若有星期的需求直接看 TimeRangeList组件
* @Author dengkangning
* @Date 2020年11月18日 16:33:19
*/
export default {
	model: {
		prop: "sendTimeList",
	},
	props: {
		sendTimeList: {
			required: true,
			default: []
		},
		readonly: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		timeRangeList: function (value) {
			this.$emit('change', value);
			this.$parent.$