如何在vue.js中启动lottie玩家点击按钮动画

Question

我有一个lottie动画json文件名为恭喜。json。我在src中包含了文件的路径。在lottie player标签这样的:

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

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

Answer 1

这似乎不是在Vue中执行所需操作的正确方法。我假设您希望在单击按钮时显示lottie玩家。如果是这样，有一种方法:

您可以在组件的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标签的属性也应该正确，这样才能正常工作。