当前位置： 首页 > article >正文

Vue2时间轴组件（TimeLine/分页、自动顺序播放、暂停、换肤功能、时间选择，鼠标快速滑动）

article 2024/9/20 22:24:54

目录

1介绍背景

2实现原理

3组件介绍

4代码

5其他说明

1介绍背景

项目背景是  一天的时间轴  10分钟为一间隔 一天被划分成144个节点  一页面12个节点 代码介绍的很详细 可参考或者借鉴

2实现原理

对Element-plus滑块组件的二次封装
基于Vue2（2.6.14），对element-plus(2.15.13)中slider滑块组件的二次封装。其中，用到了element-plus中的部分icon图标。

组件主要是对时间节点进行分页、顺序播放、暂停、换肤功能、时间选择，点击事件，上一页下一页，父组件监听到当前时间的改变，从而触发相应的业务逻辑。

3组件介绍

light天亮模式

dark黑夜模式

4代码

<template>
  <div class="TimeLineBox">
    <h3>时间轴 {{ timeYMD }} {{ timeSFM }} </h3>
    <div class="TimeLineBox_content">
      <div class="block custom-block">
        <!-- <span class="demonstration">默认</span> -->
        <el-date-picker v-model="dayDate" type="date" placeholder="选择日期" size="small" @change="handleDatePickerChange"
          style="width: 150px;" :editable="false">
        </el-date-picker>
      </div>
      <TimeLine  :second="1000" :timeYMD="timeYMD" :timeSet="timeSet"
        @handleNowValueChange="handleNowValueChange">
      </TimeLine>
    </div>
    
  </div>
</template>
<script>
//--start-#引入时间轴组件#-->
import TimeLine from "./../components/TimeLine.vue";
//--start-#引入第三方关于时间的文件#-->
import moment from 'moment';
export default {
  components: {
    TimeLine
  },
  data() {
    return {
      //--start-#用于时间轴显示的初始化时间时分秒#-->
      timeSFM: "00:10:00",
      //--start-#时间集合#-->
      timeSet: [],
     
      //--start-#用于时间轴显示的初始化时间年月日#-->
      timeYMD: "",
      // //--start-#拼接时间组合 具体就是年月日时分秒#-->
      // timeCombination: null
      dayDate: '',

    }
  },
  mounted() {
    this.computerTimeSet();
  },
  computed: {},
  methods: {
    handleDatePickerChange() {
      //--start-#获取时间选择器的年月日#-->
      //console.log("@@", this.dayDate);
      if (this.dayDate) {
        //--start-#非空执行#-->
        this.handleTimeSetNode(moment(this.dayDate).format('YYYY-MM-DD'))
      }
    },
    //--start-#计算时间轴中需要的时间节点集合方法#-->
    computerTimeSet() {
      //--start-#获取当天的年月日0时0分0秒#-->
      let startOfDay = moment().startOf('day');
      //--start-#获取当天的前一天年月日0时0分0秒#-->
      let previousDate = startOfDay.subtract(1, 'days');
      this.handleTimeSetNode(previousDate)
    },
    handleTimeSetNode(timeNode) {
      //--start-#获取当天的前一天年月日用于计算时间节点#-->
      let oneTimeNode = new Date(timeNode);
      //--start-#获取当天的前一天年月日  用于时间轴标题显示#-->this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD HH:mm:ss');
      this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD');
      //--start-#遍历计算获取当天10分钟一次的时间节点组合#-->
      for (let i = 0; i < 144; i++) {
        //--start-#获取时间 并设置分钟位加10，意思是加10分钟#-->
        oneTimeNode.setMinutes(oneTimeNode.getMinutes() + 10);
        //this.timeSet.push(moment(oneTimeNode).format('YYYY-MM-DD HH:mm:ss'));
        //--start-#获取时间节点并加入到时间节点集合中#-->
        this.timeSet.push(moment(oneTimeNode).format('HH:mm:ss'));
      }
    },
    //--start-#父子函数回调，接收时间值的改变并响应#-->
    handleNowValueChange(val, val2) {
      if (val === "nextDay") {
        let oneTimeNode = new Date(this.timeYMD);
        oneTimeNode.setDate(oneTimeNode.getDate() + 1);
        this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD');
        this.timeSFM = val2;
      }
      else if (val === "preDay") {
        let oneTimeNode = new Date(this.timeYMD);
        oneTimeNode.setDate(oneTimeNode.getDate() - 1);
        this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD');
        this.timeSFM = val2;
      }
      else if (val === "nextDayAndZero") {
        let oneTimeNode = new Date(this.timeYMD);
        oneTimeNode.setDate(oneTimeNode.getDate() + 1);
        this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD');
        this.timeSFM = val2;
      }
      else if (val === "preDayAndZero") {
        let oneTimeNode = new Date(this.timeYMD);
        oneTimeNode.setDate(oneTimeNode.getDate() - 1);
        this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD');
        this.timeSFM = val2;
      }
      else {
        this.timeYMD = val;
        this.timeSFM = val2;
      }
      console.log(val, val2);
    }
  },
// watch:{
//   light(newVal,oldVal){
//     console.log(newVal,oldVal);
//   }
// }
}
</script>
<style lang="less" scoped>
.TimeLineBox {
  width: 100%;
  height: 100%;
  //background-image: url("./../assets/images/播放.png");
  background-size: 100% 100%;
  background-color: aqua;
  position: relative;

  h3 {
    color: rgb(241, 19, 19);
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .TimeLineBox_content {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 1000px;
    // width: 80%;
    height: 90px;

    .custom-block {
      position: absolute;
      left: 20px;
      top: 5px;
      z-index: 10;

      //background-color: rgb(233, 11, 11);

      ::v-deep .el-input__inner {
        background-color: rgba(255, 255, 255, 0.0);
        border: none;
      }
    }

  }
}
</style>

<template>
  <div :class="bgcolor == 'light' ? 'TimeLine2-light' : 'TimeLine2-dark'">
    <div class="LeftBox">
      <el-slider v-model="value" :step="1" show-stops :show-tooltip="false" :min="minValue" :max="maxValue"
        :marks="marks" @change="handleTimeLineChange" v-if="timeSet.length" />
    </div>
    <div class="RightBox">
      <el-tooltip class="box-item" effect="light" content="上一页" placement="top">
        <el-icon :color="bgcolor == 'light' ? '#4a0987' : 'white'" size="30px" @click.native="handlePrePage"
          class="el-icon-d-arrow-left  icon-size">
        </el-icon>
      </el-tooltip>

      <el-tooltip class="box-item" effect="light" content="播放/暂停" placement="top">
        <el-icon :color="bgcolor == 'light' ? '#4a0987' : 'white'" size="30px" v-if="playSwitch"
          class="el-icon-video-pause icon-size" @click.native="handlePlay">
        </el-icon>
        <el-icon :color="bgcolor == 'light' ? '#4a0987' : 'white'" size="30px" v-if="!playSwitch"
          class="el-icon-video-play icon-size" @click.native="handlePlay">

        </el-icon>
      </el-tooltip>

      <el-tooltip class="box-item" effect="light" content="下一页" placement="top">
        <el-icon :color="bgcolor == 'light' ? '#4a0987' : 'white'" size="30px" @click.native="handleNextPage"
          class="el-icon-d-arrow-right  icon-size">
        </el-icon>
      </el-tooltip>
    </div>
    <div class="skin-control">
      <el-icon :color="bgcolor == 'light' ? '#4a0987' : 'white'" size="30px" @click.native="skinControlSwitch"
        class="el-icon-s-opportunity" :class="bgcolor == 'light' ? 'skin-control-light' : 'skin-control-dark'">
      </el-icon>
    </div>
  </div>


</template>
<script>

export default {
  data() {
    return {
      //--start-#定义时间定时器指引#-->
      timer: null,
      //--start-#时间轴页面容量#-->
      pageSize: 12,
      //--start-#时间轴页面数#-->
      pageCode: 1,
      //--start-#时间轴初始化显示的位置（0-11）#-->
      value: 0,
      //--start-#时间轴最小值#-->
      minValue: 0,
      //--start-#时间轴最大值#-->
      maxValue: 0,
      //--start-#遮罩，element公司提供的技术接口#-->
      marks: {},
      //--start-#播放按键转换#-->
      playSwitch: false,
      //--start-#时间集合12节点为一组#-->
      time12ArrNode: [],
      zeroTimeNode: undefined,
      startZero: true,
      bgcolor: "light"
    }
  },
  props: {

    //--start-#父组件时间轴展示标题#-->
    timeYMD: {
      type: String,
      default: '',
    },
    //--start-#时间节点集合#-->
    timeSet: {
      type: Array,
      default: [],
    },
    //--start-#播放时的时间间隔#-->
    second: {
      type: Number,
      default: 1000,
    },
  },
  mounted() { },
  computed: {},
  methods: {
    //--start-#处理皮肤空间切换#-->
    skinControlSwitch() {
      if (this.bgcolor === "dark")
        this.bgcolor = "light"
      else if (this.bgcolor === "light")
        this.bgcolor = "dark"
    },
    //--start-#处理时间轴点击事件#-->
    handleTimeLineChange(val) {
      if (this.time12ArrNode[val] === "00:00:00") {
        this.zeroTimeNode = "00:00:00";
        this.$emit("handleNowValueChange", "nextDayAndZero", "00:00:00");
      }
      else {
        if (this.zeroTimeNode === "00:00:00") {
          this.zeroTimeNode = undefined;
          this.$emit("handleNowValueChange", "preDayAndZero", this.time12ArrNode[val]);
        }
        else {
          this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[val]);
        }
      }
    },
    //--start-#处理播放是与否#-->
    handlePlay() {
      this.playSwitch = !this.playSwitch;
    },
    computeTime12ArrNode() {
      this.time12ArrNode = Array.from(this.timeSet).slice(
        (this.pageCode - 1) * this.pageSize,
        this.pageCode * this.pageSize
      );
    },
    //--start-#处理上一页#-->
    handlePrePage() {
      //console.log(this.zeroTimeNode);
      this.startZero = false;
      if (this.pageCode === 1) {

        this.pageCode = Math.ceil(this.timeSet.length / this.pageSize)
        this.value = 0;
        this.computeTime12ArrNode();
        this.$emit("handleNowValueChange", "preDay", "22:10:00");

      }
      else if (this.pageCode > 1 && !this.zeroTimeNode) {

        this.pageCode--;
        this.value = 0;
        this.computeTime12ArrNode();
        this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[0]);
        if (this.time12ArrNode[0] == "00:10:00") {
          this.startZero = true;
        }
      }
      else if (this.pageCode === Math.ceil(this.timeSet.length / this.pageSize) && this.zeroTimeNode === "00:00:00") {

        // this.zeroTimeNode = undefined;
        this.pageCode--;
        this.value = 0;
        this.computeTime12ArrNode();
        this.$emit("handleNowValueChange", "preDay", "20:10:00");
      }
      this.zeroTimeNode = undefined;
      // console.log("@@", this.zeroTimeNode);
    },
    //--start-#处理下一页#-->
    handleNextPage() {
      this.startZero = false;
      //console.log(this.zeroTimeNode);
      if (this.pageCode === Math.ceil(this.timeSet.length / this.pageSize) && this.zeroTimeNode === "00:00:00") {
        this.pageCode = 1;
        this.value = 0;
        this.computeTime12ArrNode();
        this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[0]);
        this.startZero = true;
      }
      else if (this.pageCode === Math.ceil(this.timeSet.length / this.pageSize)) {
        this.pageCode = 1;
        this.value = 0;
        this.computeTime12ArrNode();
        this.$emit("handleNowValueChange", "nextDay", "00:10:00");
      }
      else if (this.pageCode < Math.ceil(this.timeSet.length / this.pageSize)) {
        this.pageCode++;
        this.value = 0;
        this.computeTime12ArrNode();
        this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[0]);
      }
      this.zeroTimeNode === undefined;
    },
    handlePalyNextPage() {
      this.pageCode++;
      this.value = 0;
      this.computeTime12ArrNode();
      this.zeroTimeNode = undefined;
    }
  },
  //--start-#监视时间轴#-->
  watch: {
    timeYMD(newVal, oldVal) {
      if (this.playSwitch)
        this.playSwitch = !this.playSwitch;
    },
    timeSet(newVal, oldVal) {
      this.time12ArrNode = Array.from(newVal).slice(
        (this.pageCode - 1) * this.pageSize,
        this.pageCode * this.pageSize
      );
    },
    time12ArrNode(newVal, oldVal) {
      let obj = {};
      this.time12ArrNode.forEach((item, index) => {
        obj[index * 1] = item;
      });
      this.marks = obj;
      this.maxValue = this.time12ArrNode.length - 1;
    },
    //--start-#深度监视#-->
    deep: true,
    playSwitch(newVal, oldVal) {
      if (newVal) {
        this.timer = setInterval(() => {
          if (this.value < this.maxValue) {

            //--start-#判断是不是一天的第一个节点，即00:10:00#-->
            if (this.value === 0 && this.startZero) {
              this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[Math.floor(this.value)]);
              this.startZero = false;
            }
            else {
              this.value++;
              //--start-#判断是不是一天的最后一个节点，即00:00:00#-->
              if (this.time12ArrNode[Math.floor(this.value)] === "00:00:00") {
                this.$emit("handleNowValueChange", "nextDayAndZero", "00:00:00");
                this.zeroTimeNode = "00:00:00";
                this.playSwitch = !this.playSwitch;
              }
              //--start-#正常范围内增长值#-->
              else {
                this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[Math.floor(this.value)]);
              }
            }
          }
          //--start-#判断是不是每页12个时间节点的最后一个执行完毕，调用下一页生成#-->
          else if (this.value === this.maxValue && this.pageCode < Math.ceil(this.timeSet.length / this.pageSize)) {
            this.handlePalyNextPage();
            this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[Math.floor(this.value)]);
          }
          //console.log("@2", this.value, this.maxValue, this.time12ArrNode[Math.floor(this.value)]);
        }, this.second);
      } else {
        if (this.timer) {
          clearInterval(this.timer);
        }
      }
    }

  }
}
</script>

<style lang="less" scoped>
.TimeLine2-light {
  user-select: none;
  width: 100%;
  height: 100%;

  border: 2px solid slateblue;
  border-radius: 10px;

  background-color: rgba(255, 255, 255, 0.5);

  backdrop-filter: blur(10px);

  display: flex;
  justify-content: space-between;
  align-items: center;

  .LeftBox {
    width: 80%;
    height: 100;

    padding: 0px 30px;

    ::v-deep .el-slider__runway {

      background-color: #cccccc88;
    }

    ::v-deep .el-slider__button {
      width: 10px;
      height: 10px;
      background-color: transparent;
      border: none;
    }

    ::v-deep .el-slider__stop {
      width: 1px;
      height: 12px;
      background-color: #4a0987;
      z-index: 999;
      display: block;
    }

    ::v-deep .el-slider__marks-text {
      color: #4a0987;
    }
  }

  .RightBox {
    width: 20%;
    height: 100;

    display: flex;
    justify-content: space-around;
    align-items: center;


  }

}

.skin-control {
  position: absolute;
  top: 5px;
  right: 5px;

}

.skin-control-light {
  color: rgba(248, 17, 17, 0.5);
}

.skin-control-dark {
  color: rgba(12, 35, 241, 0.5);
}

.icon-size {
  font-size: 20px;
}

.TimeLine2-dark {
  user-select: none;
  width: 100%;
  height: 100%;

  border: 2px solid white;
  border-radius: 10px;

  background-color: rgba(41, 5, 75, .5);

  backdrop-filter: blur(10px);

  display: flex;
  justify-content: space-between;
  align-items: center;

  .LeftBox {
    width: 80%;
    height: 100;

    padding: 0px 30px;

    ::v-deep .el-slider__runway {

      background-color: #fff3;
    }

    ::v-deep .el-slider__button {
      width: 10px;
      height: 10px;
      background-color: transparent;
      border: none;
    }

    ::v-deep .el-slider__stop {
      width: 1px;
      height: 12px;
      background-color: white;
      z-index: 999;
      display: block;
    }

    ::v-deep .el-slider__marks-text {
      color: white;
    }
  }

  .RightBox {
    width: 20%;
    height: 100;

    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>

5其他说明

原文参考了


http://www.kler.cn/news/312399.html

相关文章：

  • HarmonyOS 应用获取公钥和 MD5 指纹签名信息
  • MySQL——数据库的高级操作（二）用户管理（4）修改用户密码
  • 第6天：趋势轮动策略开发(年化18.8%，大小盘轮动加择时)
  • 基于STM32设计的水渠闸门远程控制系统(华为云IOT)(226)
  • 14_Python面向对象
  • 【LeetCode】每日一题 2024_9_17 公交路线（BFS）
  • Effective Java 学习笔记45-48 Stream
  • VS code 查看 ${workspaceFolder} 目录指代路径
  • 设计模式-行为型模式-解释器模式
  • Python 解析 Charles JSON Session File (.chlsj)
  • 攻防世界---＞gametime
  • 数据结构-2.7.单链表的查找与长度计算
  • linux-系统管理与监控-磁盘管理
  • mysql学习教程，从入门到精通，SQL DISTINCT 子句 （16）
  • DeDeCMS靶场漏洞复现
  • 前端vue-父传子
  • 2024年亲测好用的四大在线翻译工具大盘点！
  • keras和tensorflow可用的一组版本
  • 【百日算法计划】：每日一题，见证成长（013）
  • MySQL练手题--获得最近第二次的活动（困难）
  • 【JVM】符号引用 和 直接引用
  • 中国计算机学会（CCF）推荐中文科技期刊目录（2019年）
  • nacos报Client not connected, current status:STARTING
  • Stable Diffusion绘画 | ControlNet应用-IP-Adapter：堪比 Midjourney 垫图
  • Ubuntu在CMakeLists.txt中指定OpenCV版本的参考方法
  • 【QT基础】创建项目项目代码解释
  • Python和Java的自动化测试技术研究及应用探索
  • Linux Vim编辑器常用命令
  • 【源码+文档+调试讲解】健身房管理平台小程序
  • 【Linux修行路】网络套接字编程——UDP