提示:使用vue把一周的时间划分为可以选择多个阶段段(亲测有效)
一、直接复制以下代码
代码如下(示例):
<template><div class="byted-weektime" @mousedown="dian" @mousemove="yi" @mouseup="li"><div class="calendar"><table class="calendar-table" style="width:610px"><thead class="calendar-head"><tr><th rowspan="6" class="week-td">星期/时间</th><th colspan="24">00:00 - 12:00</th><th colspan="24">12:00 - 24:00</th></tr><tr><td colspan="2" v-for="(item,index) in tableHeader" :key="index">{{item}}</td></tr></thead><tbody id="tableBody"><divid="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>星期一</td><td@mousedown.prevent="handleMouseDown(i,0)"@mouseup.prevent="handleMouseUp(i,0)"class="calendar-atom-time":class="item.class"v-for="(item,i) in rowUnit[0]":key="i"></td></tr><tr><td>星期二</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>星期三</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>星期四</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>星期五</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>星期六</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]":key="i"></td></tr><tr><td>星期日</td><td@mousedown.prevent="handleMouseDown(i,6)"@mouseup.prevent="handleMouseUp(i,6)"class="calendar-atom-time":class="item.class"v-for="(item,i) in rowUnit[6]":key="i"></td></tr><tr><td colspan="49" class="td-table-tip"><div class="clearfix"><span class="pull-left tip-text">请用鼠标点选时间段</span><a @click="clear" class