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

Posted 2023-02-26

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

【英文标题】：How to launch lottie player animation on click button in vue.js

【发布时间】：2021-10-24 09:14:44

【问题描述】：

我有一个名为 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>;
  ,

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

【问题讨论】：

尝试在路径前添加 telda ~ 以便 webpack 理解这是一条路径

请告诉我在哪里包含 telda。我不清楚。

nvm，查了一下，它似乎只适用于 CSS，应该是 src="~../../../congratulations.json"

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

【讨论】：

这里的showPlayer是一个变量。我不是函数。那么为什么你将它包含在 v-on:click=" "

确实是一个变量。但是，您可以在 v-on（以及其他 Vue 指令，例如 v-bind 和 v-if）中编写单行 JS 表达式作为 wekk，所以我正在编写表达式以在 v-on 中将 showPlayer 设置为 true（它是一件简单的事情，但如果你真的想的话，你可以将它包含在一个方法中）。

工作......终于