vue3使用Lottie

第一步：安装lottie

// "lottie-web": "^5.9.6",
npm i lottie-web

第二步：封装lottie.vue

<template>
    <div ref="animation" :style="{ width, height }"></div>
</template>

<script>

    import {defineComponent, ref, onMounted} from 'vue'

    import lottie from 'lottie-web'

    export default defineComponent({
        name: 'Lottie',
        props: {
            width: {
                type: String,
                default: '100px',
            },
            height: {
                type: String,
                default: '100px',
            },
            src: {
                type: String,
                default: "https://assets10.lottiefiles.com/packages/lf20_dyiqnus5.json",
            },
            jsonData: {
                type: Object,
                default: () => null,
            },
            autoplay: {
                type: Boolean,
                default: true,
            },
            loop: {
                type: Boolean,
                default: true,
            },
        },
        setup(props) {
            let animation = ref(null)

            onMounted(() => {
                if (animation.value) {
                    lottie.loadAnimation({
                        container: animation.value,
                        renderer: "svg",
                        loop: props.loop,
                        autoplay: props.autoplay,
                        path: props.src,
                        // animationData只能加载本地json，优先级高于path
                        animationData: props.jsonData,
                    })
                }
            });

            return {
                animation
            }
        }
    })


</script>

<style scoped>

</style>

第三步：将封装好的lottie.vue导出

import Lottie from './src/lottie'
export { Lottie }

第四步：404.vue引入lottie.vue & 路由配置

<template>
    <div class="errPage">
        <div style="margin-top: 100px">
            <Lottie
                    width="400px"
                    height="400px"
                    src="https://assets9.lottiefiles.com/packages/lf20_suhe7qtm.json"
            />
            <div class="info">抱歉，您访问的页面不存在。</div>
            <div class="goback">
                <el-button @Click="goBack">返回上一页</el-button>
                <el-button type="primary" @Click="goHome"> 返回首页 </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
    import {Lottie} from '@/components/lottie'
    import { useRouter } from "vue-router";

    const router = useRouter();

    function goHome() {
        router.push("/");
    }

    function goBack() {
        router.go(-1);
    }
</script>

<style lang="scss" scoped>

    .errPage {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        .info {
            text-align: center;
            font-size: 16px;
            padding: 20px 0;
            color: #999;
        }

        .goback {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

</style>

const routes = [
    {
        path: '/login',
        name: 'login',
        component: () => import('@/views/Login')
    },
    {
        path: '/',
        name: 'layout',
        component: () => import('@/layout'),
        children: [
            {
                path: 'menu',
                name: 'menu',
                component: () => import('@/views/menu'),
            }
        ]
    },
    {
        path: '/:pathMatch(.*)*',
        name: '404',
        component:() => import('@/views/404')
    }
]

第五步：将json地址传给组件的src属性

效果