Vue 会议室时间选择器,可点选时间轴,时间选择器

本文主要是介绍Vue 会议室时间选择器,可点选时间轴,时间选择器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近遇到一个需求,做一个时间轴选择器,支持多个时间段选择。

实现效果:

代码开整吧:(有帮助的朋友点个关注呀!)

<!--* @FileDescription:轴选择器:对有所帮助的朋友点个关注再走呀!!!!* @Author: -----------* @LastEditors: ---------
-->
<template><div style="margin-bottom: 50px;"><div class="hours-container"><div v-for="(item, index) in hours":key="index"class="hours-item"><div class="hours-item-value"style="border-right:1px solid #ccc"><div :class="compClass(12 * item)"@click="handleClick(12 * item)"@mouseover="handleHover(12 * item)"></div><div :class="compClass(12 * item + 1)"@click="handleClick(12 * item + 1)"@mouseover="handleHover(12 * item + 1)"></div><div :class="compClass(12 * item + 2)"@click="handleClick(12 * item + 2)"@mouseover="handleHover(12 * item + 2)"></div><div :class="compClass(12 * item + 3)"@click="handleClick(12 * item + 3)"@mouseover="handleHover(12 * item + 3)"></div><div :class="compClass(12 * item + 4)"@click="handleClick(12 * item + 4)"@mouseover="handleHover(12 * item + 4)"></div><div :class="compClass(12 * item + 5)"@click="handleClick(12 * item + 5)"@mouseover="handleHover(12 * item + 5)"></div><div :class="compClass(12 * item + 6)"@click="handleClick(12 * item + 6)"@mouseover="handleHover(12 * item + 6)"></div><div :class="compClass(12 * item + 7)"@click="handleClick(12 * item + 7)"@mouseover="handleHover(12 * item + 7)"></div><div :class="compClass(12 * item + 8)"@click="handleClick(12 * item + 8)"@mouseover="handleHover(12 * item + 8)"></div><div :class="compClass(12 * item + 9)"@click="handleClick(12 * item + 9)"@mouseover="handleHover(12 * item + 9)"></div><div :class="compClass(12 * item + 10)"@click="handleClick(12 * item + 10)"@mouseover="handleHover(12 * item + 10)"></div><div :class="compClass(12 * item + 11)"@click="handleClick(12 * item + 11)"@mouseover="handleHover(12 * item + 11)"></div></div><div class="hours-item-header"><span v-if="index === 0 || index === 24">{{ timeHours[index] }}</span></div></div></div><div class="tipss color999 font12 fontw "><i class="el-icon-warning font14"></i>操作提示:点击向右滑动为选中,反之取消。</div><div class="tips"><span class="color999">已选时间段:</span><span class="fontw times"style="color:#1890ff"v-for="(items,index) in tips":key="index">{{ items }},</span></div></div>
</template><script>export default {model: {prop: "sendTimeList",},props: {// sendTimeList: {//   required: true,//   default: []// },readonly: {type: Boolean,default: false},timeLineLists: {type: Array}},watch: {timeLineLists () {this.sendTimeList = this.timeLineLists},tips () {this.$emit('tipsList', this.tips)},timeRangeList: function (value) {this.$emit('change', value);this.$parent.$emit("el.form.change");// 触发父组件的校验规则},sendTimeList: {handler () {this.transformedIndex();},deep: true}},computed: {},data () {return {hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],timeHours: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],// 选项selectStart: false,// 开始startIndex: '0',// 开始下标timeRangeList: [],// 选择的时间段timeRangeListIndex: [0],// 选中的下标tempRangeIndex: [],// 预选下标tips: '向右选中,向左取消选择',//提示操作endHour: '',//选择结束时间endMin: '',//选择结束分钟startHour: '',//开始时间startMin: '',//开始时间sendTimeList: []}},methods: {// 时间区间转换成下标区间transformedIndex () {this.timeRangeListIndex = [];this.timeRangeList = this.sendTimeList;this.timeRangeList.forEach(element => {const [startTime, endTime] = element.match(/\d+\:\d+/g);if (startTime && endTime) {let [startHour, startMin] = startTime.split(':');let [endHour, endMin] = endTime.split(':');if (startHour && startMin && endHour && endMin) {let startNum, endNum;if (startMin === '00') {startNum = 12 * parseInt(startHour);} else {startNum = 12 * parseInt(startHour) + 1;}if (endMin === '00') {endNum = 12 * parseInt(endHour) - 1;} else {endNum = 12 * parseInt(endHour);}while (endNum >= startNum) {this.timeRangeListIndex.push(startNum);startNum++;}} else {this.$message.error("时间段格式不正确");}} else {this.$message.error("没有拿到开始时间或结束时间或者时间段格式不对");}});this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '';},// 下标区间转换成时间区间transformedSection () {this.timeRangeList = [];// Array.from(new Set(this.timeRangeList))let startTime = '', endTime = '', len = this.hours.length;for (let index = this.hours[0] * 12; index < 12 * (len + 1); index++) {if (this.timeRangeListIndex.indexOf(index) > -1) {// 如果有开始时间,直接确定结束时间if (startTime) {// debuggerthis.endHour = Math.floor((index + 1) / 12);//判断是否重复选择选择下标开始结束时间if (this.endHour === this.startHour) {let endTimeAll = 5 * ((index) % 12) === 5 ? '05' : 5 * ((index) % 12)this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;} else {let endTimeAll = 5 * ((index + 1) % 12) === 5 ? '05' : 5 * ((index + 1) % 12)this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;}} else {// 没有开始时间,确定当前点为开始时间// debuggerthis.startHour = Math.floor(index / 12);let startTimeAll = 5 * (index % 12) === 5 ? '05' : 5 * ((index) % 12)this.startMin = index % 12 === 0 ? "00" : startTimeAll;startTime = `${this.startHour < 10 ? '0' + this.startHour : this.startHour}:${this.startMin}`;}// 如果是最后一格,直接结束if (index === 12 * this.hours.length + 1) {endTime = `${Math.floor((index + 1) / 12)}:00`;this.timeRangeList.push(`${startTime ? startTime : "23:30"}-${endTime}`);startTime = '';endTime = '';}} else {// 若这个点不在选择区间,确定一个时间段if (startTime && endTime) {this.timeRangeList.push(`${startTime}-${endTime}`);startTime = '';endTime = '';} else if (startTime && !endTime) {// 这里可能只选半个小时this.endHour = Math.floor(index / 12);//判断是否重复选择选择下标开始结束时间if (this.endHour === this.startHour) {let endTimeAll = 5 * ((index) % 12) === 5 ? '05' : 5 * ((index) % 12)this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;this.timeRangeList.push(`${startTime}-${endTime}`);startTime = '';endTime = '';} else {let endTimeAll = 5 * ((index + 1) % 12) === 5 ? '05' : 5 * ((index + 1) % 12)this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;this.timeRangeList.push(`${startTime}-${endTime}`);startTime = '';endTime = '';}// let endtimeAll = 15 * ((index + 1) % 4)// this.endMin = index % 4 === 0 ? "00" : endtimeAll;// endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;// this.timeRangeList.push(`${startTime}-${endTime}`);// startTime = '';// endTime = '';}}}this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '';},// 点击事件handleClick (index) {if (this.selectStart) {// 双击取反if (index === this.startIndex) {if (this.timeRangeListIndex.indexOf(index) > -1) {this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1);} else {this.timeRangeListIndex.push(this.startIndex);}} else if (index > this.startIndex) {// 选取数据--向右添加,向左取消while (index >= this.startIndex) {this.timeRangeListIndex.push(this.startIndex);this.startIndex++;}this.timeRangeListIndex = Array.from(new Set(this.timeRangeListIndex));} else {// 删除数据while (this.startIndex >= index) {if (this.timeRangeListIndex.indexOf(index) > -1) {this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1);}index++;}}this.startIndex = '';this.tempRangeIndex = [];this.transformedSection();} else {this.startIndex = index;}this.selectStart = !this.selectStart;},// 预选区间handleHover (index) {if (this.selectStart) {this.tempRangeIndex = [];// 选取数据--向右添加,向左取消if (index > this.startIndex) {while (index >= this.startIndex) {this.tempRangeIndex.push(index);index--;}} else {// 删除数据while (this.startIndex >= index) {this.tempRangeIndex.push(index);index++;}}}},// 是否选中,计算classNamecompClass (index) {if (index === this.startIndex) {return 'hours-item-left preSelected';}if (index >= this.startIndex) {if (this.tempRangeIndex.indexOf(index) > -1) {return 'hours-item-left preSelected';}} else {if (this.tempRangeIndex.indexOf(index) > -1) {return 'hours-item-left unSelected';}}return this.timeRangeListIndex.indexOf(index) > -1 ? 'hours-item-left selected' : 'hours-item-left';},compItem (item) {// 不足10前面补0return item < 10 ? `0${item}` : item;},},mounted () {this.transformedIndex();this.transformedSection();}
}
</script><style lang="scss" scoped>
.hours-container {margin-left: 1.5%;display: flex;cursor: pointer;margin-top: 10px;.hours-item {width: 4%;height: 45px;// border: 1px solid #c2d0f3;border-right: none;text-align: center;&:last-child {.hours-item-value {display: none;}.hours-item-header {border-top: none;margin-top: 12px;margin-left: -25px;}}.hours-item-header {text-align: left;position: relative;margin-left: -20%;width: 100%;height: 30px;line-height: 30px;border-top: 1px solid #ccc;&:last-child {width: 150%;}}.hours-item-value {width: 100%;height: 12px;box-sizing: border-box;display: flex;&:first-child {border-left: 1px solid #ccc;}&:last-child {border-right: 1px solid #ccc;}.hours-item-left,.hours-item-right {width: 50%;height: 11px;margin-top: 1px;// border-right: 1px solid #ccc;box-sizing: border-box;&:last-child {border-right: none;}}}.selected {background-color: rgba(0, 87, 255, 0.4);border-bottom: 1px solid #ccc;}.preSelected {background-color: rgba(255, 148, 49, 0.4);border-bottom: 1px solid #ccc;}.unSelected {background-color: #ffffff;border-bottom: 1px solid #ccc;}}
}
.tips {// width: auto;border-radius: 4px;line-height: 30px;border: 1px solid #1890ff;background: rgba(53, 158, 255, 0.05);padding: 5px 20px;position: absolute;.times {margin-right: 0px;}
}
</style>

实现动态效果:

 本来想放个视频效果的,但是目前好像不支持插入视频了,你们自己下去试试吧!

这篇关于Vue 会议室时间选择器,可点选时间轴,时间选择器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/782524

相关文章

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

MySQL 日期时间格式化函数 DATE_FORMAT() 的使用示例详解

《MySQL日期时间格式化函数DATE_FORMAT()的使用示例详解》`DATE_FORMAT()`是MySQL中用于格式化日期时间的函数,本文详细介绍了其语法、格式化字符串的含义以及常见日期... 目录一、DATE_FORMAT()语法二、格式化字符串详解三、常见日期时间格式组合四、业务场景五、总结一、

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②