如何在 vue.js 中的单击按钮上启动彩票播放器动画

Question

我有一个名为 congratulations.json 的抽签动画 json 文件。我在 lottie player 标签 中包含了 src 中的文件路径，如下所示：

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

我想在 vue.js 中点击一个按钮时启动这个抽奖播放器动画。

我的代码是这样的：

<div class="justify-content-center">
  <button v-on:click="cong" class="btn">
    animation
  </button>
</div>

methods: {
  cong() {
    <lottie-player
      class="justify-content-center"
      src="../../../congratulations.json"
      background="transparent"
      speed="1"
      style="width: 300px; height: 300px"
      loop
      controls
      autoplay
    ></lottie-player>;
  },
}

但它不起作用。我是否需要安装任何插件/扩展或我的代码不正确？

Answer 1

这似乎不是在 Vue 中做你想做的事情的正确方法。我假设您想在单击按钮时显示彩票玩家。如果是这样，这是一种方法：

您可以在组件的data 中有一个布尔变量，例如showPlayer 最初将设置为 false。然后，你可以删除cong 方法，并有这样的东西：

<div class="justify-content-center">
    <button v-on:click="showPlayer = true" class="btn">
      animation
    </button>
    <lottie-player
            v-if="showPlayer"
            class="justify-content-center"
            src="**../../../congratulations.json**"
            background="transparent"
            speed="1"
            style="width: 300px; height: 300px"
            loop
            controls
            autoplay
    ></lottie-player>
</div>

当然，这只是模板代码。您需要在组件的data 中有布尔变量。 lottie-player 标签的属性也应该是正确的，这样才能正常工作。