vue.js 如何在单击按钮时启动 Lottie 播放器动画

Question

我有一个名为 congratulations.json 的 lottie 动画 json 文件。我已经在 src 中包含文件路径 lottie player tag 像这样：

<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 中的按钮时启动这个 lottie 播放器动画。

我是这样编码的：

<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>;
  },
}

但是它不起作用。我需要安装任何 addons/extensions 还是我的代码不正确？

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 标签的属性也应该是正确的，这样才能正常工作。

vue.js 如何在单击按钮时启动 Lottie 播放器动画

How to launch lottie player animation on click button in vue.js

vue.js

lottie