安装 npm add lottie-web
引入
import lottie from 'lottie-web'
基本用法 (进入页面就需要加载的类型)
<div id="lottie"></div>
<script>
mounted() {
var params = {
container: document.getElementById('lottie'), //在需要放置图片的标签添加id为Lottie
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData, //animationData为引入的json命名
}
lottie.loadAnimation(params)
},
</script>
进行操作之后再展示图片
<div id="lottile"></div>
<script>
import lottie from "lottie-web"; //引入lottie,引入之后,若之前未安装,需要先安装
import dataBackup from "@/assets/json/dataM/dataBackup"; // 引入json格式图片
methods:{
//封装成函数,在需要展示的时候调用
getImg(){
this.$nextTick(async () => {
var params1 = {
container: document.getElementById("lottile"),
renderer: "svg",
loop: true,
autoplay: true,
animationData: dataBackup,
};
lottie.loadAnimation(params1);
})
}
},
</script>