Vue implementiert Card-Flip-Karussellanzeige

Karussellanzeige der Vue-Karte beim Umschalten der Daten beim Umschalten. Zu Ihrer Information: Der spezifische Inhalt ist wie folgt

Effekte und Codes

Code:

<Vorlage>
  <div Klasse="Listencontainer">
    <div Klasse="Grund" v-if="Liste1.Länge > 0 || Liste2.Länge > 0">
      <div Klasse="Logo">
        <svg-icon Klasse="center-svg" Symbol-Klasse="centerLogo"></svg-icon>
        <div Klasse="echart">
          <echart :option="option" echartId="roadP" />
        </div>
      </div>
      <Straßenkomponente :list="list1[0]" :style="{ display: show1 }"></Straßenkomponente>
      <Straßenkomponente :list="list2[0]" :style="{ display: show2 }"></Straßenkomponente>
      <Straßenkomponente :list="list1[1]" :style="{ display: show3 }"></Straßenkomponente>
      <Straßenkomponente :list="list2[1]" :style="{ display: show4 }"></Straßenkomponente>
      <Straßenkomponente :list="list1[2]" :style="{ display: show5 }"></Straßenkomponente>
      <Straßenkomponente :list="list2[2]" :style="{ display: show6 }"></Straßenkomponente>
    </div>
  </div>
</Vorlage>
<Skript>
  importiere { defineComponent, inject, onMounted, reaktiv, onUnmounted, toRefs } von „vue“;
  importiere { congestionPredict } von '@/apis/fullView';
  Echart aus „@/components/common/echart“ importieren;
  importiere '@/assets/icons/fullView/westToEast.svg';
  importiere '@/assets/icons/fullView/eastToWest.svg';
  importiere '@/assets/icons/fullView/northToSouth.svg';
  importiere '@/assets/icons/fullView/southToNorth.svg';
  importiere '@/assets/icons/fullView/centerLogo.svg';
  importiere RoadComponent aus „@/views/fullView/left/RoadComponent“;
  exportiere StandarddefiniereKomponente({
    Name: 'RoadP',
    Komponenten: { echart, RoadComponent },
    aufstellen() {
      Lassen Sie echarts = inject('ec');
      const dataMap = reaktiv({
        Intervall: null,
        Intervall1: null,
        Liste1: [],
        Liste2: [],
        Liste: [],
        Option: {},
        Zeitüberschreitung: 10,
        show1: 'Block',
        show2: "keine",
        show3: 'blockieren',
        show4: "keine",
        show5: 'blockieren',
        show6: "keine",
      });
      beimMounted(() => {
        getData();
        dataMap.interval = setInterval(() => {
          getData();
        }, 60 * 1000);
        dataMap.interval1 = setInterval(() => {
          wenn (dataMap.timeout > 8 und dataMap.timeout < 11) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "Block";
            dataMap.show3 = "Block";
            dataMap.show5 = "Block";
            dataMap.show2 = "keine";
            dataMap.show4 = "keine";
            dataMap.show6 = "keine";
          } sonst wenn (dataMap.timeout === 8) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "keine";
            dataMap.show3 = "Block";
            dataMap.show5 = "Block";
            dataMap.show2 = "Block";
            dataMap.show4 = "keine";
            dataMap.show6 = "keine";
          } sonst wenn (dataMap.timeout === 7) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "keine";
            dataMap.show3 = "keine";
            dataMap.show5 = "Block";
            dataMap.show2 = "Block";
            dataMap.show4 = "Block";
            dataMap.show6 = "keine";
          } sonst wenn (dataMap.timeout < 7 && dataMap.timeout > 3) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "keine";
            dataMap.show3 = "keine";
            dataMap.show5 = "keine";
            dataMap.show2 = "Block";
            dataMap.show4 = "Block";
            dataMap.show6 = "Block";
          } sonst wenn (dataMap.timeout === 3) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "Block";
            dataMap.show3 = "keine";
            dataMap.show5 = "keine";
            dataMap.show2 = "keine";
            dataMap.show4 = "Block";
            dataMap.show6 = "Block";
          } sonst wenn (dataMap.timeout === 2) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "Block";
            dataMap.show3 = "Block";
            dataMap.show5 = "keine";
            dataMap.show2 = "keine";
            dataMap.show4 = "keine";
            dataMap.show6 = "Block";
          } sonst wenn (dataMap.timeout === 1) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "Block";
            dataMap.show3 = "Block";
            dataMap.show5 = "Block";
            dataMap.show2 = "keine";
            dataMap.show4 = "keine";
            dataMap.show6 = "keine";
          } anders {
            dataMap.timeout = 10;
          }
        }, 1000);
      });
      beiUnmountet(() => {
        Intervall löschen(dataMap.interval);
        Intervall löschen(dataMap.interval1);
      });
      const getData = () => {
        congestionPredict()
          .then((res) => {
            wenn (res && res.code === 0 && res.data) {
              dataMap.list1 = [];
              dataMap.list2 = [];
              für (sei i = 0; i < 6; i = i + 2) {
                dataMap.list1.push([
                  {
                    Name: res.data[i].name,
                    Richtung: res.data[i].direction,
                    Wert: res.data[i].index.toFixed(1),
                    Symbol: res.data[i].englishDirection,
                  },
                  {
                    Name: res.data[i + 1].name,
                    Richtung: res.data[i + 1].direction,
                    Wert: res.data[i + 1].index.toFixed(1),
                    Symbol: res.data[i + 1].englishDirection,
                  },
                ]);
              }
              für (sei j = res.data.length - 1; j > res.data.length - 6; j = j - 2) {
                dataMap.list2.push([
                  {
                    Name: res.data[j].name,
                    Richtung: res.data[j].direction,
                    Wert: res.data[j].index.toFixed(1),
                    Symbol: res.data[j].englishDirection,
                  },
                  {
                    Name: res.data[j - 1].name,
                    Richtung: res.data[j - 1].direction,
                    Wert: res.data[j - 1].index.toFixed(1),
                    Symbol: res.data[j - 1].englishDirection,
                  },
                ]);
              }
            }
          })
          .catch((err) => {
            console.log(fehler);
          })
          .finally(() => {
            dataMap.option = getOption();
          });
      };

      const getOption = () => {
        zurückkehren {
          Serie: [
            {
              Typ: 'liquidFill',
              Name: '',
              Radius: '85%',
              Mitte: ['50%', '45%'],
              Daten: [0,55, 0,5, 0,5],
              Farbe: ['rgba(0,118,255,0,5)', 'rgba(0,102,255,0,5)', 'rgba(0,185,255,0,6)'],
              Gliederung: {
                anzeigen: falsch,
              },
              Hintergrundstil: {
                Farbe: 'transparent',
                Rahmenfarbe: 'transparent',
                Rahmenbreite: 1,
                Schattenfarbe: 'transparent',
                Schattenunschärfe: 0,
              },
              Etikett: {
                anzeigen: falsch,
              },
            },
          ],
        };
      };
      zurückkehren {
        ...toRefs(Datenkarte),
      };
    },
  });
</Skript>
<style scoped lang="weniger">
  .Listencontainer {
    Breite: 100 %;
    Höhe: 280px;
  }
  .Grund {
    Breite: 696px;
    Rand: 16px automatisch;
    Höhe: 228px;
    Position: relativ;
    Listenstil: keiner;
    .logo {
      Breite: 150px;
      Höhe: 150px;
      Position: absolut;
      links: 0;
      rechts: 0;
      oben: 0;
      unten: 0;
      Rand: automatisch;
      Hintergrund: URL ('~@/assets/img/fullView/centerGround.dynamic.png');
      Hintergrundgröße: 100 % 100 %;
    }
    .echart {
      Breite: 158px;
      Höhe: 158px;
      Position: absolut;
      links: -4px;
      oben: 4px;
    }
  }
  .center-svg {
    Breite: 90px;
    Höhe: 100px;
    Position: absolut;
    links: 30px;
    oben: 25px;
    Z-Index: 15;
  }
</Stil>

Kartenkomponenten

<Vorlage>
  <div Klasse="Zurück" v-if="list.length > 0">
    <div Klasse="oben">
      <svg-icon class="svg" :icon-class="Liste[0].icon"></svg-icon>
      <div>
        <div>
          <p class="span-container text-overflow">{{ Liste[0].name }}</p>
          <p Klasse="index" :style="{ Farbe: switchColor(Liste[0].Wert) }">{{ Liste[0].Wert }}</p>
        </div>
        <div>
          <p class="span-container text-overflow">{{ Liste[1].name }}</p>
          <p Klasse="index" :style="{ Farbe: switchColor(Liste[1].Wert) }">{{ Liste[1].Wert }}</p>
        </div>
      </div>
      <svg-icon class="svg" :icon-class="Liste[1].icon"></svg-icon>
    </div>
  </div>
</Vorlage>
<Skript>
  importiere { defineComponent } von „vue“;

  exportiere StandarddefiniereKomponente({
    Name: 'Straßenkomponente',
    Requisiten: {
      Liste: {},
    },
    aufstellen() {
      const switchColor = (Wert) => {
        wenn (Wert > 0 und Wert <= 2) {
          gib '#00DBEB' zurück;
        } sonst wenn (Wert > 2 und Wert <= 3) {
          gib '#FFD200' zurück;
        } sonst wenn (Wert > 3 und Wert <= 4) {
          gib '#FF7309' zurück;
        } sonst wenn (Wert > 4 und Wert <= 5) {
          gib '#FF0000' zurück;
        }
      };
      zurückkehren {
        SchalterFarbe,
      };
    },
  });
</Skript>
<style lang="less" scoped>
  .geh zurück {
    Transformationsstil: 3D bewahren;
    Animation: zurück 0,5 s linear 1;
  }
  .zurück:hover {
    Animations-Wiedergabestatus: angehalten;
  }
  @keyframes zurück {
    0% {
      transformieren: Z-Drehung (0 Grad) Y-Drehung (0 Grad) X-Drehung (-90 Grad);
    }
    100 % {
      transformieren: Z drehen (0 Grad) Y drehen (0 Grad) X drehen (0 Grad);
    }
  }
  .span-container {
    Breite: 150px;
    Rand: 0 0 5px 5px;
    Farbe: var(--text-blue);
    Schriftgröße: var(--font-traffic-size);
  }
  .svg {
    Breite: 41px;
    Höhe: 41px;
  }
  .Spitze {
    Anzeige: Flex;
    Flex-Wrap: Nowrap;
    Polsterung: 0 20px;
    Rand: 0 0 14px 0;
    Inhalt ausrichten: Abstand dazwischen;
    Elemente ausrichten: zentrieren;
    Höhe: 68px;
    Rahmenradius: 10px;
    Deckkraft: 0,9;
    Hintergrund: linearer Farbverlauf(
      89 Grad,
      rgba(0, 76, 169, 0,5) 0%,
      rgba(0, 76, 169, 0) 46%,
      rgba(0, 76, 169, 0) 49%,
      rgba(0, 76, 169, 0) 52%,
      rgba(0, 76, 169, 0,5) 100 %
    );
  }
  .oben > div {
    Breite: 640px;
    Anzeige: Flex;
    Textausrichtung: zentriert;
    Elemente ausrichten: zentrieren;
    Flex-Wrap: Nowrap;
    Inhalt ausrichten: Abstand dazwischen;
    & > div {
      Breite: 160px;
      Spanne {
        Rand links: 15px;
      }
    }
    .index {
      Breite: 155px;
      Höhe: 28px;
      Schriftgröße: var(--font-size-chart-title);
      Textausrichtung: zentriert;
      Rand: 0;
      Zeilenhöhe: 28px;
    }
  }
</Stil>

Um Tutorials zu Vue.js-Komponenten zu erhalten, klicken Sie bitte auf das spezielle Lern-Tutorial zu Vue.js-Komponenten.

Wunderbares Thema teilen: jQuery-Bildkarussell JavaScript-Bildkarussell Bootstrap-Bildkarussell

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Vue realisiert Click-Flip-Effekt
Vue.js realisiert digitale Scroll- und Flip-Effekte auf großen Bildschirmen
Analyse der Nutzung der Vue-Bildbrowserkomponente V-Viewer [unterstützt Drehung, Skalierung, Spiegeln und andere Vorgänge]
Vue iview mehrere Bilder große Bildvorschau, Zoomen und Spiegeln
Vue realisiert den Card-Flip-Effekt

<<: Grafisches Tutorial zur Installation und Konfiguration von mysql 5.7.17 winx64.zip

>>: So steuern Sie die Startreihenfolge von Docker Compose-Diensten