实现7*24拖拽时间段选择器

最新推荐文章于 2024-08-20 18:17:52 发布

小九九嘞

最新推荐文章于 2024-08-20 18:17:52 发布

阅读量672

点赞数

分类专栏：前端文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_41673550/article/details/117702446

版权

本文介绍如何利用Vue.js和JavaScript技术，创建一个可拖拽选择24小时时间段的组件，适用于日程安排或预约系统，提供便捷的时间选择体验。

摘要由CSDN通过智能技术生成

<template>
	<div class="byted-weektime">
		<div class="calendar">
			<!-- <div class="schedule"></div> -->
			<!-- <div class="schedule" style="opacity: 0; display: none; left: 680px; top: 294px; width: 11px; height: 30px;"></div> -->
			<table class="calendar-table" style="width:610px">
				<thead class="calendar-head">
          <tr>
						<td colspan="49" class="td-table-tip">
							<div class="clearfix flex header-tr">
								<span class="pull-left tip-text">请用鼠标点选时间段</span> <a @click="clear" class="pull-right"> 清空</a>
							</div>
						</td>
					</tr>
          <tr>
					  <th rowspan="2" class="week-td">星期/时间</th>
          </tr>
					<tr>
						<td colspan="2" v-for="index in tableHeader" :key="index">{
   {
   index}}</td>
					</tr>
				</thead>
				<!-- <tbody @mousemove.prevent.stop="kuangMove" @mouseleave.prevent.stop="kuangLeave" @mousedown.prevent.stop="kuangDown" @mouseup.prevent.stop="kuangUp"> -->
				<!-- 不画框,没bug -->
				<tbody id="tableBody">

					<div id="kuang" :style="{width:kuangObj.width+'px',height:kuangObj.height+'px',top:kuangObj.top+'px',left:kuangObj.left+'px',bottom:kuangObj.bottom+'px',right:kuangObj.right+'px'}"></div>
          
					<tr>
						<td class="week">星期一</td>
						<td @mousedown.prevent="handleMouseDown(i,0)" @mouseup.prevent="handleMouseUp(i,0)" class="calendar-atom-time monday" :class="item.class" v-for="(item,i) in rowUnit[0]" :key="i"></td>
					</tr>
					<tr>
						<td class="week">星期二</td>
						<td @mousedown.prevent="handleMouseDown(i,1)" @mouseup.prevent="handleMouseUp(i,1)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[1]" :key="i"></td>
					</tr>
					<tr>
						<td class="week">星期三</td>
						<td @mousedown.prevent="handleMouseDown(i,2)" @mouseup.prevent="handleMouseUp(i,2)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[2]" :key="i"></td>
					</tr>
					<tr>
						<td class="week">星期四</td>
						<td @mousedown.prevent="handleMouseDown(i,3)" @mouseup.prevent="handleMouseUp(i,3)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[3]" :key="i"></td>
					</tr>
					<tr>
						<td class="week">星期五</td>
						<td @mousedown.prevent="handleMouseDown(i,4)" @mouseup.prevent="handleMouseUp(i,4)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[4]" :key="i"></td>
					</tr>
					<tr>
						<td class="week">星期六</td>
						<td @mousedown.prevent="handleMouseDown(i,5)" @mouseup.prevent="handleMouseUp(i,5)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[5]"