Klicken Sie in Vue.js auf eine Schaltfläche, um Animationen nach dem Zufallsprinzip zu generieren

Question

Ich habe drei Lottie-Player-JSON-Animationsdateien – congratulations1.json, congratulations2.json und congratulations3.json Die Animationen sind wie folgt:

Herzlichen Glückwunsch 1:

<lottie-player
          v-if="showPlayer1"
          class="justify-content-center"
          src="../../../congratulations.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;

Herzlichen Glückwunsch 2:

<lottie-player
          v-if="showPlayer2"
          class="justify-content-center"
          src="../../../congratulations2.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;

Herzlichen Glückwunsch 3:

<lottie-player
          v-if="showPlayer3"
          class="justify-content-center"
          src="../../../congratulations3.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;

Hinweis: Der Pfad zur json-Datei wird im Quellcode dieser Lottie-Player-Tags erwähnt.

Ich möchte einzelne Schaltflächen zufällig anzeigen, wenn sie angeklickt werden.

Dinge, die ich getan habe:

Ich habe für jede der drei Animationen drei Variablen verwendet. Die Variablen sind - showPlayer1, showPlayer2 und showPlayer3. Ich speichere sie in einem Array namens showPlayer und setze ihren Wert auf false. Ich weiß nicht, ob mein Programm korrekt ist. Ich weiß nicht, was ich als nächstes tun soll.

Mein Sortiment:

<script>
export default {
  data() {
    return {
      showPlayer: [
        (showPlayer1 = false),
        (showPlayer2 = false),
        (showPlayer3 = false),
      ],
    };
  },

Ich habe das getan. Ich weiß nicht, was ich in die Schaltflächenbeschriftung einfügen soll, um diese drei Animationen zufällig aus dem Array anzuzeigen. Bitte helfen Sie.

Aktualisierter Code:

<div class="justify-content-center anim">
        <lottie-player
          v-if="showPlayer === 1"
          class="justify-content-center"
          src="../../../congratulations.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;
      </div>
      <div class="justify-content-center anim">
        <lottie-player
          v-if="showPlayer === 2"
          class="justify-content-center"
          src="../../../congratulations_2.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;
      </div>
      <div class="justify-content-center anim">
        <lottie-player
          v-if="showPlayer === 3"
          class="justify-content-center"
          src="../../../congratulations_3.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;
      </div>

Answer 1

正如我在下面所展示的，还有多种其他方法可以实现这一目标。但如果你想像你建议的那样做，我不会使用 showPlayer 作为布尔数组，而是作为数字。

有多种方法可以解决这个问题。如果您只想使用一个组件并切换源，您可以执行以下操作： 首先，将组件的 src 设置为变量：

;

使用 data() 中的字符串设置一个数组，如下所示：

animations: [
    '../../../congratulations.json',
    '../../../congratulations2.json',
    '../../../congratulations3.json',
  ],
  animationSrc: ''

然后为 randomButton 设置一个方法，如下所示：

onRandomButtonPress() {
  this.animationSrc = this.animations[Math.floor(Math.random()*this.animations.length)];
},

我很快就破解了一个codesandbox： https://codesandbox.io/s/elastic -dijkstra-o7ety?file=/src/components/HelloWorld.vue

你还可以使用vue中的:is属性来加载动态组件，并在代码中设置要加载哪个组件。 https://v2.vuejs.org/v2/guide/components-动态异步.html