一个vue时间轴功能实现

<template>
  <div ref="timecontainer" @mouseleave="mouseleave" class="history">
    <div class="left-shadow"></div>
    <div
      @mousedown="mousedown"
      @mouseup="mouseup"
      :style="objStyle"
      ref="target"
      class="time-axis-outer"
    >
      <div class="time-axis">
        <div v-for="(item, index) in list" :key="index">
          <div class="year-title">{{ item.text }}</div>
          <div class="year">{{ item.year }}</div>
        </div>
      </div>
      <div class="bgline">
        <div
          class="bg-interval"
          v-for="(item, index) in list"
          :key="index"
        ></div>
      </div>
    </div>
    <div class="right-shadow"></div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Emit, Prop, Watch } from "vue-property-decorator";

@Component({
  components: {},
})
export default class App extends Vue {
  objStyle = {
    left: 0 + "px",
  };
  ele = null as HTMLDivElement;
  viewArea = null as HTMLDivElement;

  list = [
    { year: "1982", text: "aaaa" },
    { year: "1995", text: "bbbb" },
    { year: "2004", text: "cccc" },
    { year: "2009", text: "dddd" },
    { year: "2010", text: "eeee" },
    { year: "2012", text: "ffff" },
    { year: "2018", text: "gggg" },
    { year: "2018", text: "hhhhh" },
    { year: "2019", text: "iiiii" },
    { year: "2020", text: "jjjj" },
    { year: "2021", text: "kkkk" },
  ];
  isdown = false;
  tempfn = null as any;
  callbackarr: (() => void)[] = [];

  movecallback = (clientx: number, initleft: number, start: number) => {
    let that = this;

    return function (e: MouseEvent) {
      let offset = e.clientX - clientx; //实时的减去点击时候的位置

      const left = initleft + offset;

      if (left > -start && left <= 0) {
        that.objStyle.left = left + "px";
      }
    };
  };
  mouseupcallback = (e: MouseEvent) => {
    this.mouseup();
  };

  mounted() {
    this.ele = this.$refs.target as HTMLDivElement;
    this.viewArea = this.$refs.timecontainer as HTMLDivElement;
    this.objStyle.left = this.ele.offsetLeft + "px";

    document.body.addEventListener("mouseup", this.mouseupcallback);
  }

  mousedown(e: MouseEvent) {
    this.isdown = true;

    let start = this.ele.offsetWidth - this.viewArea.offsetWidth;

    this.tempfn = this.movecallback(e.clientX, this.ele.offsetLeft, start);

    this.callbackarr.push(this.tempfn);

    (this.$refs.timecontainer as HTMLDivElement).addEventListener(
      "mousemove",
      this.tempfn
    );
  }

  mouseleave() {
    this.mouseup();
  }

  mouseup() {
    this.callbackarr.forEach((item) => {
      (this.$refs.timecontainer as HTMLDivElement).removeEventListener(
        "mousemove",
        item
      );
    });

    this.tempfn = null;
    this.isdown = false;
  }

  beforeDestroy() {
    document.body.removeEventListener("mouseup", this.mouseupcallback);
  }
}
</script>
<style scoped lang="scss">
.history {
  position: relative;
  height: 320px;
  overflow: hidden;
  .time-axis-outer {
    position: absolute;
    width: var(--contentWidth);
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .bgline {
      display: flex;
      justify-content: space-around;
      align-items: end;
      left: 0;
      top: 170px;
      width: var(--contentWidth);
      height: 10px;
      transform: translateY(-120px);
      background: RGBA(164, 196, 253, 1);
      .bg-interval {
        width: 10px;
        height: 30px;
        background: RGBA(164, 196, 253, 1);
      }
    }
    .time-axis {
      left: 0;
      top: 0;
      height: 290px;
      width: var(--contentWidth);
      display: flex;
      justify-content: space-around;
      cursor: pointer;
      & > div {
        height: 290px;
        width: 410px;

        .year-title {
          margin-top: 60px;
        }
        .year {
          margin-top: 120px;
          font-size: 30px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #a4c4fd;
          height: 35px;
          line-height: 35px;
        }
      }
    }
  }
  .left-shadow {
    z-index: 1;
    position: absolute;
    width: 300px;
    height: 320px;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, #030e26 0%, rgba(3, 14, 38, 0) 100%);
  }

  .right-shadow {
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    height: 320px;
    transform: rotate(180deg);
    background: linear-gradient(90deg, #030e26 0%, rgba(3, 14, 38, 0) 100%);
  }
}
</style>