vue 通过 JSON数据 + lottite 实现loading

下载

yarn add lottie-web
 

引入

import lottie from 'lottie-web'; //引入框架
import data from '@/assets/loading.json' //引入数据

播放事件

onMounted(() => {
    const lottieContainer = document.getElementById('lottie-container');
    const animation = lottie.loadAnimation({
        container: lottieContainer,
        renderer: 'svg', // 渲染器类型（可以根据您的需求选择）
        loop: true, // 是否循环播放
        autoplay: true, // 自动播放
        animationData: data, // 导入的JSON动画数据
    });
})