Vue realisiert die Palastgitterrotationslotterie

<Vorlage>
  <div Klasse="Startseite">
    <div Klasse="Home-Container">
      <div Klasse="Home-Container-Linie">
        <div
          Klasse = "Home-Container-Zeilenbox"
          v-for="Element in Liste.Slice(0, 5)"
          :Schlüssel="Artikel.index"
          :Klasse="{ ausgewählt: Element.aktiv }"
        >
          {{ Artikel.label }}
        </div>
      </div>
      <div Klasse="Home-Container-Linie">
        <div
          Klasse = "Home-Container-Zeilenbox"
          v-for="Element in Liste.Slice(11, 12)"
          :Schlüssel="Artikel.index"
          :Klasse="{ ausgewählt: Element.aktiv }"
        >
          {{ Artikel.label }}
        </div>
        <div Klasse = "home-container-line-btn" @click = "handleClick" :disable = "isAnimate"></div>
        <div
          Klasse = "Home-Container-Zeilenbox"
          v-for="Element in Liste.Slice(5, 6)"
          :Schlüssel="Artikel.index"
          :Klasse="{ ausgewählt: Element.aktiv }"
        >
          {{ Artikel.label }}
        </div>
      </div>
      <div Klasse="Home-Container-Linie">
        <div
          Klasse = "Home-Container-Zeilenbox"
          v-for="Element im Array.prototype.reverse.call(Liste.slice(6, 11))"
          :Schlüssel="Artikel.index"
          :Klasse="{ ausgewählt: Element.aktiv }"
        >
          {{ Artikel.label }}
        </div>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Glück",
  Daten() {
    zurückkehren {
      Liste: [
        { label: "Nicht gewinnend", val: 1, img: "", index: 0, active: false },
        { label: "Gesundheitswesen", val: 2, img: "", index: 1, active: false },
        { label: "iPhone13", val: 3, img: "", index: 2, active: false },
        { label: "MacBook Pro", val: 4, img: "", index: 3, active: false },
        { label: "MacBook Air", val: 5, img: "", index: 4, active: false },
        { label: "1 Punkt", val: 6, img: "", index: 5, active: false },
        { label: "5 Punkte", val: 7, img: "", index: 6, active: false },
        { label: "10 Punkte", val: 8, img: "", index: 7, active: false },
        { label: "Xiao Ai", val: 9, img: "", index: 8, active: false },
        { label: "Anmuxi-Joghurt", val: 10, img: "", index: 9, active: false },
        { label: "Warenkorb leeren", val: 11, img: "", index: 10, active: false },
        { label: "50 Yuan Telefonrechnung", val: 12, img: "", index: 11, active: false },
      ],
      isAnimate: false, // true bedeutet, dass die Lotterie läuft. Das Klicken auf die Lotterieschaltfläche vor Ende der aktuellen Lotterie ist ungültig jumpIndex: Math.floor(Math.random() * 12), // Index des Lotteriesprungs jumpingTime: 0, // Zeit des Sprungs jumpingTotalTime: 0, // Gesamte Sprungzeit, basierend auf der Dauervariable plus einer Zufallszahl zwischen 0 und 1000 jumpingChange: 0, // Höchste Sprungrate, basierend auf der Geschwindigkeitsvariable plus einer Zufallszahl zwischen 0 und 3 duration: 4500, // Dauer velocity: 300, // Velocity};
  },
  Methoden: {
    handleKlick() {
      wenn(dies.istAnimate) return;
      diese.Sprungzeit = 0;
      diese.Gesamtzeit des Springens = Math.random() * 1000 + diese.Dauer;
      dies.jumpingChange = Math.random() * 3 + diese.geschwindigkeit;
      dies.animateRound(dieses.jumpIndex);
    },

    animateRound(index) {
      dies.isAnimate = wahr; 
      wenn(dieser.jumpIndex < diese.list.length - 1 ) dieser.jumpIndex ++;
      wenn (dieser.jumpIndex >= diese.Liste.Länge - 1) dieser.jumpIndex = 0;

      this.jumpingTime += 100; // Die Zeit, die durch die Ausführung der Methode setTimeout in jedem Frame benötigt wird // Wenn die aktuelle Zeit größer als die Gesamtzeit ist, beende die Animation und lösche den Preis if (this.jumpingTime >= this.jumpingTotalTime) {
        dies.isAnimate = falsch; 
        wenn(index == 0) {
          alert(`Schade, dass ich den Preis nicht gewonnen habe, weiter so~`);
        }
        anders{
          alert(`Herzlichen Glückwunsch, Sie haben gezogen: ${this.list[index].label}`)
        }
        zurückkehren
      }

      // Rotationsanimation wenn (Index >= this.list.length-1) {
        Index = 0;
        diese.Liste[11].aktiv = falsch;
        diese.Liste[index].aktiv = wahr;
        Index -= 1;
      } anders {
        diese.Liste[index].aktiv = falsch;
        diese.Liste[Index + 1].aktiv = wahr;
      }

      setzeTimeout(() => {
        dies.animateRound(index + 1);
      }, dies.easeOut(diese.jumpingTime, 0, dies.jumpingChange, dies.jumpingTotalTime));
    },

    /**
     * Easing-Funktion, von schnell nach langsam* @param {Num} t aktuelle Zeit* @param {Num} b Anfangswert* @param {Num} c Wert ändern* @param {Num} d Dauer*/
    easeOut(t, b, c, d) {
      wenn ((t /= d / 2) < 1) returniere (c / 2) * t * t + b;
      return (-c / 2) * (--t * (t - 2) - 1) + b;
    },
  },
};
</Skript>
<style lang="scss" scoped>
.Mitte {
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
}
.heim {
  Polsterung: 0;
  Rand: 0;
  Breite: 100 %;
  Höhe: berechnet (100vh – 16px);
  Hintergrundbild: linearer Farbverlauf (25 Grad, #30007c, #464995, #4d83ad, #41bfc4);
  @erweitern .center;
  &-Behälter {
    Breite: 1000px;
    Höhe: 600px;
    &-Linie {
      Breite: 100 %;
      Höhe: 198px;
      Anzeige: Flex;
      &-Kasten {
        biegen: 1;
        Überlauf: versteckt;
        Rand: 5px 3px 5px 3px;
        @erweitern .center;
        Hintergrund: #fff;
        Übergang: alle 0,3 s;
      }
      &-btn {
        Position: relativ;
        Flexibilität: 3;
        Überlauf: versteckt;
        Rand: 5px 3px 3px 3px;
        @erweitern .center;
        Box-Schatten: 0 1px 10px 0px #cf5531;
        Hintergrundbild: linearer Farbverlauf(
          25 Grad,
          #cf5531,
          #d0853a,
          #cdaf43,
          #c4d84d
        );
        Cursor: Zeiger;
        &:aktiv {
          Hintergrundbild: linearer Farbverlauf(
            25 Grad,
            #3f3e41,
            #6d6340,
            #9a8b39,
            #c9b629
          );
        }
        &::vor {
          Position: absolut;
          Inhalt: „Klicken Sie, um den Preis zu gewinnen“;
          Schriftgröße: 2,5rem;
          Farbe: #fff;
          Schriftstärke: fett;
        }
      }
    }
  }
}
.ausgewählt {
  Hintergrund: rgba($color: #f6e58d, $alpha: 0,5);
  Animationsname: funkeln;
  Animationsdauer: 3s;
  Anzahl der Animationsiterationen: unendlich;
}
@keyframes funkeln {
  0 % {Hintergrund:#ffbe76;}
 100 % {background:#f6e58d;}
}
</Stil>