【vue】vue如何使用lottie

一般比较大的动画 gif 图就有很多弊端，首先是太大，其次就是有毛边，观感不太好，所以如果使用的话更推荐使用lottie

1-安装

npm install lottie-web

2- 在需要使用的页面引入

	import lottie from 'lottie-web'

3-书写Lottie函数

// lottie动画渲染
			    intLottie(domId, path, loop = false) {
			      // 渲染主图按钮动画
			      let lottieBox = lottie.loadAnimation({
			        container: document.getElementById(domId), // 包含动画的dom元素
			        renderer: 'svg', // 渲染出来的是什么格式
			        loop: loop, // 循环播放
			        autoplay: true, // 自动播放
			        path: path
			      });
			      lottieBox['addEventListener']('complete', () => {
					  console.log('完成')
			      
			      });
			    },

然后在需要的时候直接调用就可以了

附上官网链接

Lottie Docs