vue时间段选择器

实现的功能代码心得

实现的功能

可以添加和取消时间段,需要把选中的时间段数组再转成适合人看的格式.

代码

没有整理和优化,但保证可用,还差画方框的程序需要调整

<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> <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="index in tableHeader">{{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>星期一</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]"></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]"></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]"></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]"></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]"></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]"></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]"></td> </tr> <tr> <td colspan="49" class="td-table-tip"> <div class="clearfix"> <span class="pull-left tip-text">请用鼠标点选时间段</span> <a @click="clear" class="pull-right"> 清空</a> </div> </td> </tr> <tr> <td colspan="49" class="timeContent"> <div v-for="(item,index) in timeStr" v-show="item.length"> <span>{{weekDate[index+1]}}: </span> <strong><span>{{item}}</span></strong> </div> </td> </tr> </tbody> </table> </div> </div> </template> <script> export default { name: 'timeSelect', data(){ return{ tableHeader:['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'], weekDate:{'1':'星期一','2':'星期二','3':'星期三','4':'星期四','5':'星期五','6':'星期六','7':'星期日'}, rowUnit:[ //每一个单元格 //[{class:null,timeData:0},{class:null,timeData:1}...] 星期一 ], timeContent:[ //选中的时间段原始数据 //{arr:[]},{arr:[]}... ], timeSection:[ //时间段,可以返回给后端的数据 // [ // [0,1,2,3],[7,8] => [0,2],[3.5,4.5] // ], // [ // [4,5,6],[10] => [2,3.5],[5,5.5] // ] ], timeStr: [ //时间段,前端显示的数据 // '00:00~02:00 | 03:30~04:30', // '02:00~03:30 | 05:00~05:30', // '', // '', // '', // '', // '' ], beginDay:0, beginTime:0, downEvent:false, kuangObj:{ width:0, height:0, top:0, left:0, bottom:0, right:0, oldLeft:0, oldTop:0, flag:false } } }, created() { this.init() }, mounted(){ //画框程序 // let oBox = document.getElementById("tableBody") // let oDiv = document.getElementById("kuang") // //鼠标按下，获取初始点 // oBox.onmousedown = function (ev) { // var x1 = ev.clientX - oBox.offsetLeft; // var y1 = ev.clientY - oBox.offsetTop; // oBox.onmousemove = function (ev) { // var x2 = ev.clientX - oBox.offsetLeft; // var y2 = ev.clientY - oBox.offsetTop; // //3.设置div的样式 // oDiv.style.left = (x2 > x1 ? x1 : x2) +"px"; // oDiv.style.top = (y2 > y1 ? y1 : y2) +"px"; // oDiv.style.width = Math.abs(x2-x1)+"px"; // oDiv.style.height =Math.abs(y2-y1)+"px"; // } // return false; //解除在划动过程中鼠标样式改变的BUG // } // //在鼠标抬起后终止onmousemove事件 // document.onmouseup = function () { // oBox.onmousemove = null; // oDiv.style.left = 0 +"px"; // oDiv.style.top = 0 +"px"; // oDiv.style.width = 0+"px"; // oDiv.style.height =0+"px"; // } }, methods:{ init(){ for (let i = 0; i < 7; i++) { let arr = [] for (let j = 0; j < 48; j++) { arr.push({class:null,timeData:j}) } this.rowUnit.push(arr) this.timeContent.push({arr:[]}) this.timeSection.push([]) this.timeStr.push('') } }, handleMouseDown(i,day){ this.downEvent = true //按下时鼠标不在范围内则不算 this.beginDay = day this.beginTime = i }, handleMouseUp(i,day){ //当点击事件是在table内才触发选取数据操作 if (this.downEvent) { //选时间段 let _this = this let begin = this.beginTime let start = begin <= i ? begin : i //x轴 起点 let length = Math.abs(begin - i) let end = start + length //x轴 终点 let dayStart = this.beginDay <= day ? this.beginDay : day //y轴 起点 let dayLength = Math.abs(this.beginDay - day) let dayEnd = dayStart + dayLength //y轴 终点 //当框选范围内所有块都是选中状态时,执行反选 function isAdd() { for (let x = dayStart; x < dayEnd+1; x++) { for (let y = start; y < end+1; y++) { if(_this.rowUnit[x][y].class == null) return true } } return false } if (isAdd()) { //没选中的全都选上 for (let x = dayStart; x < dayEnd+1; x++) { for (let y = start; y < end+1; y++) { if(this.rowUnit[x][y].class == null) { this.rowUnit[x][y].class = 'ui-selected' this.timeContent[x].arr.push(this.rowUnit[x][y].timeData) } } } }else{ //反选 for (let x = dayStart; x < dayEnd+1; x++) { for (let y = start; y < end+1; y++) { this.rowUnit[x][y].class = null this.timeContent[x].arr.remove(this.rowUnit[x][y].timeData) } } } //过滤时间段,将临近的时间段合并 this.filterTime(dayStart,dayEnd) } this.downEvent = false }, filterTime(start,end) { //选中的x,y坐标信息 x:0-47 y:0-6 function sortCut(arr) { //提取连续的数字 var result = [] arr.forEach(function (v, i) { var temp = result[result.length - 1]; if (!i) { result.push([v]); } else if (v % 1 === 0 && v - temp[temp.length - 1] == 1) { temp.push(v) } else { result.push([v]) } }); return result } function toStr(num) { if (Number.isInteger(num)) { let str = num<10 ? ('0'+num) : num.toString() return str+':00' }else{ let str =Math.floor(num)<10 ? ('0'+Math.floor(num)) : Math.floor(num).toString() return str+':30' } } function timeToStr(arr) { //把数组转成方便人看到字符串 let str = '' arr.forEach((arr,index)=>{ let str1 = '' if (index == 0) { str1 = toStr(arr[0]) + '~' + toStr(arr[1]) }else{ str1 = ' , ' + toStr(arr[0]) + '~' + toStr(arr[1]) } str += str1 }) return str } //排序,分割成 for (let i = start; i < end+1; i++) { let arr1 = sortCut(this.timeContent[i].arr.sort((a, b) => a - b)) let arr2 = [] arr1.forEach((arr)=>{ //转成带小数点的时间段,以及供前端显示的字符串 let arr3 = [] arr3.push(arr[0]/2) arr3.push(arr[arr.length-1]/2+0.5) arr2.push(arr3) }) //console.log(arr2) this.timeStr[i] = timeToStr(arr2) this.timeSection[i] = arr2 } }, clear(){ this.rowUnit.forEach((item)=>{ item.forEach((item1)=>{ item1.class=null }) }) this.timeContent.forEach((item)=>{ item.arr = [] }) this.timeSection.forEach((item)=>{ //赋值成空数组[]出问题 item.length = 0 }) //遍历赋值成'',不管用 this.timeStr.length = 0 for (let i = 0; i < 7; i++) { this.timeStr.push('') } //this.initState = true }, //画框操作 kuangMove(){ if(!this.kuangObj.flag) return if (this.downEvent) { let x1 = this.kuangObj.oldLeft let y1 = this.kuangObj.oldTop let x2 = event.layerX let y2 = event.layerY this.kuangObj.left = (x2 > x1 ? x1 : x2) this.kuangObj.top = (y2 > y1 ? y1 : y2) this.kuangObj.width = Math.abs(x2-x1) this.kuangObj.height =Math.abs(y2-y1) } }, kuangDown(){ this.kuangObj.flag = true this.kuangObj.oldLeft = event.layerX this.kuangObj.oldTop = event.layerY }, kuangUp(){ this.kuangObj.flag = false this.clearDragData() }, kuangLeave(){ this.kuangObj.flag = false this.clearDragData() }, clearDragData(){ for(let prop in this.kuangObj){ this.kuangObj[prop] = 0 } } } } planTimeIntervals: [ { "planTimes": [ { "beginTime": 0, "endTime": 0 } ], "week": 0 } ] </script> <style scoped> .byted-weektime .calendar{-webkit-user-select:none;position:relative;display:inline-block} /*.byted-weektime .calendar .schedule{background:#2F88FF;width:0;height:0;position:fixed;display:none;top:0;left:0;pointer-events:none;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;-ms-transition:all 400ms ease;transition:all 400ms ease}*/ .byted-weektime .calendar .calendar-table{border-collapse:collapse;border-radius:4px} .byted-weektime .calendar .calendar-table tr .calendar-atom-time:hover{background:#ccc} .byted-weektime .calendar .calendar-table tr .ui-selected{background:#2F88FF} .byted-weektime .calendar .calendar-table tr .ui-selected:hover{background:#2F88FF} .byted-weektime .calendar .calendar-table tr,.byted-weektime .calendar .calendar-table td,.byted-weektime .calendar .calendar-table th{border:1px solid #ccc;font-size:12px;text-align:center;min-width:11px;line-height:1.8em;-webkit-transition:background 200ms ease;-moz-transition:background 200ms ease;-ms-transition:background 200ms ease;transition:background 200ms ease} .byted-weektime .calendar .calendar-table tbody tr{height:30px} .byted-weektime .calendar .calendar-table tbody tr td:first-child{background:#F8F9FA} .byted-weektime .calendar .calendar-table thead th,.byted-weektime .calendar .calendar-table thead td{background:#F8F9FA} .byted-weektime .calendar .calendar-table .td-table-tip{line-height:2.4em;padding:0 12px 0 19px;background:#fff !important} .byted-weektime .calendar .calendar-table .td-table-tip .clearfix{height:46px;line-height:46px} .byted-weektime .calendar .calendar-table .td-table-tip .pull-left{font-size:14px;color:#333333} .byted-weektime .week-td{width:75px;padding:20px 0} .byted-weektime a{cursor:pointer;color:#2F88FF;font-size:14px} #kuang{position: absolute;background-color: blue;opacity: 0.3;} </style>

心得

样式是仿头条的 通过记录鼠标down和up事件单元格所在的坐标信息去处理数据与添加样式,实现起来要比计算宽高简单多了,而且不会因为组件放的位置不同出现bug. vue是数据驱动的,开发程序时一定要想好实现原理和数据结构,围绕数据结构去开发其他的程序,会少走很多弯路,代码写的比较烂,凑合看吧.

!!!温馨提示: 203行的remove方法是加在Array原型上的,此代码里没有写,网上搜一下有很多,不然运行不了.