Implementierung der Elementzeitleiste

<div Klasse="Block">
  <div Klasse="Radio">
    Sortierung:
    <el-radio-group v-model="umgekehrt">
      <el-radio :label="true">Umgekehrte Reihenfolge</el-radio>
      <el-radio :label="false">Positive Folge</el-radio>
    </el-radio-gruppe>
  </div>

  <el-timeline :reverse="umkehren">
    <el-Zeitleistenelement
      v-for="(Aktivität, Index) in Aktivitäten"
      :Schlüssel="Index"
      :Zeitstempel="Aktivität.Zeitstempel">
      {{aktivität.inhalt}}
    </el-timeline-item>
  </el-Zeitleiste>
</div>

<Skript>
  Standard exportieren {
    Daten() {
      zurückkehren {
        umgekehrt: wahr,
        Aktivitäten: [{
          Inhalt: „Die Aktivität hat wie geplant begonnen“,
          Zeitstempel: '2018-04-15'
        }, {
          Inhalt: „Prüfung bestanden“,
          Zeitstempel: '2018-04-13'
        }, {
          Inhalt: 'Erfolgreich erstellt',
          Zeitstempel: '2018-04-11'
        }]
      };
    }
  };
</Skript>

<div Klasse="Block">
  <el-Zeitleiste>
    <el-Zeitleistenelement
      v-for="(Aktivität, Index) in Aktivitäten"
      :Schlüssel="Index"
      :icon="Aktivitätssymbol"
      :Typ="Aktivität.Typ"
      :color="Aktivität.Farbe"
      :Größe="Aktivitätsgröße"
      :Zeitstempel="Aktivität.Zeitstempel">
      {{aktivität.inhalt}}
    </el-timeline-item>
  </el-Zeitleiste>
</div>

<Skript>
  Standard exportieren {
    Daten() {
      zurückkehren {
        Aktivitäten: [{
          Inhalt: „Unterstütze die Verwendung von Symbolen“,
          Zeitstempel: '2018-04-12 20:46',
          Größe: 'groß',
          Typ: "primär",
          Symbol: „el-icon-more“
        }, {
          Inhalt: „Benutzerdefinierte Farben unterstützen“,
          Zeitstempel: '2018-04-03 20:46',
          Farbe: '#0bbd87'
        }, {
          Inhalt: „Benutzerdefinierte Größe unterstützen“,
          Zeitstempel: '2018-04-03 20:46',
          Größe: 'groß'
        }, {
          Inhalt: „Standard-Stilknoten“,
          Zeitstempel: '2018-04-03 20:46'
        }]
      };
    }
  };
</Skript>

<div Klasse="Block">
  <el-Zeitleiste>
    <el-timeline-item timestamp="2018/4/12" placement="oben">
      <el-Karte>
        <h4>Github-Vorlage aktualisieren</h4>
        <p>Wang Xiaohu hat am 12.04.2018 um 20:46 Uhr eingereicht</p>
      </el-Karte>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/3" placement="oben">
      <el-Karte>
        <h4>Github-Vorlage aktualisieren</h4>
        <p>Wang Xiaohu hat am 03.04.2018 um 20:46 Uhr eingereicht</p>
      </el-Karte>
    </el-Zeitleistenelement>
    <el-timeline-item timestamp="2018/4/2" placement="oben">
      <el-Karte>
        <h4>Github-Vorlage aktualisieren</h4>
        <p>Wang Xiaohu hat am 2.4.2018 um 20:46 Uhr eingereicht</p>
      </el-Karte>
    </el-timeline-item>
  </el-Zeitleiste>
</div>