Vue.js implementiert eine Timeline-Funktion

<Vorlage>
  <div Klasse="Zeitleiste-Haupt">
    <div Klasse="Zeitleistenachse">
      <div Klasse="Achsenelement"
        v-for="(Zeit, Index) in Datum/Zeiten"
        :Schlüssel="index">
        <div Klasse="Achsenelement-Tick"
          :Klasse="{ 'axis-item-tick-active': index === highlightIndex }"
          @mouseenter="hoverIndex = index"
          @mouseleave="hoverIndex = -1"
          @click="tickClick(Zeit, Index)">
        </div>
        <div Klasse="Achsenelement-Bezeichnung"
          v-if="dateTimeIndexes.indexOf(index) >= 0">
          {{ Zeit }}</div>
        <div Klasse="Achsen-Element-Tipp"
          v-if="index === Highlight-Index || Index === Hover-Index">
          {{ Zeit }}</div>
      </div>
    </div>
    <div Klasse="Zeitleistensteuerung">
      <i Klasse = "Menüsymbol Symbol links"
        :Klasse="{'menu-icon-disabled': abspielen}"
        @click="zurück"></i>
      <i Klasse="Menü-Symbol"
        :class="{'icon-play': !wird abgespielt, 'icon-pause': wird abgespielt}"
        @click="Wiedergabe umschalten"
        @mouseleave="hoverIndex = -1"></i>
      <i class="Menü-Symbol Symbol-rechts"
        :Klasse="{'menu-icon-disabled': abspielen}"
        @click="vorwärts"></i>
      <i Klasse = "Menüsymbol Symbol nach oben"
        :Klasse="{'menu-icon-disabled': abspielen}"
        @click="GeschwindigkeitSlow"></i>
      <i
        class="Menüsymbol Geschwindigkeit">{{ Optionen.Geschwindigkeit }}</i>
      <i Klasse = "Menüsymbol Symbol nach unten"
        :Klasse="{'menu-icon-disabled': abspielen}"
        @click="GeschwindigkeitQuick"></i>
    </div>
  </div>
</Vorlage>
<Skript>
importiere { dateFormat } von '../util/formatdate.js' // Datumsformat exportiere Standard {
  Daten() {
    zurückkehren {
      intervalTimer: null, // Timer dateTimeIndexes: [], // Datumsliste playing: false, // Wiedergabe activeIndex: 0, // aktuelle Zeitposition hoverIndex: 0 // Zeitposition bei Bewegung der Maus }
  },
  Requisiten: {
    Optionen:
      Typ: Objekt,
      Standard() {
        zurückkehren {}
      }
    },
    Datum/Uhrzeit: {
      Typ: Array,
      Standard() {
        zurückkehren []
      }
    },
    Intervall: {
      Typ: Nummer,
      Standard() {
        Rückgabe 100
      }
    }
  },
  berechnet: {
    HighlightIndex() {
      zurückkehren (
        (dieser.activeIndex === -1 und dieses.dateTimes.length - 1) ||
        dieser.activeIndex
      )
    }
  },
  betrachten:
    Optionen:
      handler() {
        dies.renderTimeline()
      },
      tief: wahr
    },
    spielen() {
      wenn (dieses.spielen) {
        dieser.IntervalTimer = setzeInterval(() => {
          dieser.activeIndex = (dieser.activeIndex + 1) % dieses.dateTimes.length
        }, diese.Optionen.Geschwindigkeit * 1000)
      } anders {
        wenn (dieser.IntervallTimer) {
          Intervall löschen(diesen.IntervallTimer)
          this.intervalTimer = null
        }
      }
    },
    aktivIndex() {
      const Zeit = this.dateTimes[this.activeIndex].split(' ')[0]
      dies.$emit('getDateFun', Zeit)
    }
  },
  montiert() {
    dies.renderTimeline()
    lass das = dies
    Fenster.onresize = Funktion () {
      das.renderTimeline()
    }
  },
  Filter:
    formatDatetime(dateTime) {
      Datum/Uhrzeit = Datumsformat(Datum/Uhrzeit, 'MM.tt')
      Rückgabedatum/-zeit
    }
  },
  Methoden: {
    /**
     * @name: Zeitleiste initialisieren*/
    renderTimeline() {
      // Zeitleistenbreite const timelineWidth = this.$el.offsetWidth - 40
      //Anzahl der Daten const dateTimesSize = this.dateTimes.length
      // Wenn die gesamte Zeit angezeigt wird, die ideale Breite der Zeitleiste const dateTimesWidth = dateTimesSize * this.interval
      // Wenn die Breite der Zeitleiste kleiner als die ideale Breite ist, if (timelineWidth >= dateTimesWidth) {
        this.dateTimeIndexes = this.dateTimes.map((dateTime, index) => {
          Rückgabeindex
        })
        zurückkehren
      }
      // Wie viele Datums-Ticks kann die aktuelle Zeitleistenbreite höchstens aufnehmen? const maxTicks = Math.floor(timelineWidth / this.interval)
      // Anzahl der Intervall-Ticks const gapTicks = Math.floor(dateTimesSize / maxTicks)
      // Notieren Sie den anzuzeigenden Datumsindex this.dateTimeIndexes = []
      für (let t = 0; t <= maxTicks; t++) {
        this.dateTimeIndexes.push(t * gapTicks)
      }
      const len ​​= this.dateTimeIndexes.length
      // Das letzte Element erfordert eine spezielle Behandlung, wenn (Länge > 0) {
        const lastIndex = this.dateTimeIndexes[Länge - 1]
        wenn (letzterIndex + gapTicks > dateTimesSize - 1) {
          this.dateTimeIndexes[Länge - 1] = dateTimesSize - 1
        } anders {
          this.dateTimeIndexes.push(Datum/Uhrzeit-Größe - 1)
        }
      }
    },

    /**
     * @name: Klickskala * @param {time}
     * @param {index}
     */
    tickClick(Zeit, Index) {
      wenn (dieses.spielen) {
        zurückkehren
      }
      this.activeIndex = Index
    },

    /**
     * @name: Abspielen und Pause */
    Wiedergabe umschalten() {
      dies.spielen = !dies.spielen
    },

    /**
     * @name: die Zeit geht einen Tag zurück*/
    rückwärts() {
      wenn (dieses.spielen) {
        zurückkehren
      }
      dieser.activeIndex = dieser.activeIndex - 1
      wenn (this.activeIndex === -1) {
        this.activeIndex = this.dateTimes.length - 1
      }
    },

    /**
     * @name: Die Zeit schreitet um einen Tag voran*/
    nach vorne() {
      wenn (dieses.spielen) {
        zurückkehren
      }
      dieser.activeIndex = (dieser.activeIndex + 1) % dieses.dateTimes.length
    },

    /**
     * @name: langsamer werden */
    GeschwindigkeitLangsam() {
      wenn (diese.abspielen || diese.Optionen.Geschwindigkeit >= diese.Optionen.GeschwindigkeitMax) {
        zurückkehren
      }
      diese.Optionen.Geschwindigkeit = diese.Optionen.Geschwindigkeit + 1
    },

    /**
     *@name: Beschleunigen */
    GeschwindigkeitQuick() {
      wenn (diese.abspielen || diese.Optionen.Geschwindigkeit <= 1) {
        zurückkehren
      }
      diese.Optionen.Geschwindigkeit = diese.Optionen.Geschwindigkeit - 1
    }
  }
}
</Skript>
<style scoped lang="scss">
.Zeitleiste-Haupt {
  Polsterung: 10px;
  Box-Größe: Rahmenbox;
  .Zeitleistenachse {
    Position: relativ;
    Anzeige: Flex;
    Inhalt ausrichten: Abstand herum;
    Polsterung: 8px 0;
    &::vor {
      Inhalt: '';
      Breite: 100 %;
      Höhe: 10px;
      Position: absolut;
      links: 0;
      unten: 8px;
      Anzeige: Inline-Block;
      Hintergrund: rgba(0, 0, 0, 0,5);
    }
    .Achsenelement {
      Position: relativ;
      Anzeige: Flex;
      Flex-Richtung: Spalte;
      Elemente ausrichten: zentrieren;
      .Achsenelement-Tick {
        Anzeige: Inline-Block;
        Breite: 4px;
        Höhe: 20px;
        Hintergrund: rgba(0, 0, 0, 0,5);
        Übergang: Hintergrund 0,3 s;
        Cursor: Zeiger;
        &:schweben {
          Hintergrund: #000;
        }
      }
      .Achsenelement-Tick-Aktiv {
        Hintergrund: #000;
      }
      .Achsenelement-Bezeichnung {
        Position: absolut;
        unten: -30px;
        Leerzeichen: Nowrap;
      }
      .Achsenelement-Tipp {
        Position: absolut;
        oben: -25px;
        Polsterung: 2px 6px;
        Rahmenradius: 2px;
        Hintergrund: rgba(0, 0, 0, 0,5);
        Leerzeichen: Nowrap;
        Farbe: #fff;
      }
    }
  }
  .Zeitleistensteuerung {
    Rand oben: 40px;
    Textausrichtung: zentriert;
    ich {
      Cursor: Zeiger;
      Anzeige: Inline-Block;
      Schriftstil: normal;
    }
    .Menü-Symbol {
      Schriftgröße: 20px;
      Breite: 20px;
      Höhe: 20px;
      Hintergrundgröße: Abdeckung;
      Hintergrundwiederholung: keine Wiederholung;
      &.Symbol-links {
        Hintergrundbild: URL('../assets/icon-left.png');
      }

      &.icon-rechts {
        Hintergrundbild: URL('../assets/icon-right.png');
      }

      &.Symbol-abspielen {
        Hintergrundbild: URL('../assets/icon-play.png');
      }

      &.icon-pause {
        Hintergrundbild: URL('../assets/icon-pause.png');
      }
      &.Symbol nach oben {
        Hintergrundbild: URL('../assets/icon-up.png');
      }

      &.Symbol nach unten {
        Hintergrundbild: URL('../assets/icon-down.png');
      }
      &.Menüsymbol deaktiviert {
        Cursor: kein Tropfen;
        Deckkraft: 0,5;
      }
    }
  }
}
</Stil>

<Vorlage>
  <div>
    <h2
      Stil="Rand:0;Textausrichtung:Mitte;">
      {{dieses.date}}
    </h2>
    <Main :options="Optionen"
      :dateTimes="Datum/Uhrzeit"
      @getDateFun="getDateFun"
      :Intervall="Intervall"></Main>
  </div>
</Vorlage>

<Skript>
importiere { dateFormat } aus './util/formatdate.js'
importiere Main aus './components/Main'
Standard exportieren {
  Name: "App",
  Daten() {
    zurückkehren {
      Datum: '',
      Optionen:
        speed: 1, // Geschwindigkeit speedMax: 10 // maximale Geschwindigkeit},
      Intervall: 20, // Das Intervall zwischen den Tagen dateTimes: [
        '03-04',
        '03-05',
        '03-06',
        '03-07',
        '03-08',
        '03-09',
        '03-10',
        '03-11',
        '03-12',
        '03-13'
      ]
    }
  },
  Komponenten:
    Hauptsächlich
  },
  montiert() {
    // Daten der letzten 10 Tage abrufen let list = []
    für (sei i = 0; i < 10; i++) {
      Liste.unshift(
        Datumsformat(
          neues Datum(
            neues Datum ().setDate(neues Datum ().getDate () - i)
          ).toLocaleDateString(),
          „TT-MM“
        )
      )
    }
    dieses.Datum = Liste[0]
    this.dateTimes = Liste
  },
  Methoden: {
    // Erhalte den von der übergeordneten Komponente übergebenen Wert getDateFun(time) {
      console.log(Zeit)
      dieses.Datum = Uhrzeit
    },
  }
}
</Skript>