vue3 中 lottie-web 封装组件

用到的JSON文件在“我的资源”里，下面这个链接直达

下面的代码中用到的JSON数据源

Lottie.vue

<script setup>
import { ref, onMounted } from 'vue'
import lottie from 'lottie-web'

// 设置组件参数
const props = defineProps({
  renderer: {
    type: String,
    default: 'svg',
  },
  // 循环播放
  loop: {
    type: Boolean,
    default: true,
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
  animationData: {
    type: Object,
    default: () => ({}),
  },
  name: {
    type: String,
    default: '',
  },
})

// 创建 lottie 接收变量和获取dom
const animation = ref(null)
const dom = ref(null)

// 创建事件返回初始化lottie对象
const emits = defineEmits(['getAnimation', 'getDom'])

// 初始化渲染 lottie动画，并返回lottie对象
onMounted(() => {
  animation.value = lottie.loadAnimation({
    container: dom.value, // 用于渲染的容器
    // 渲染方式 svg、canvas、html
    renderer: props.renderer,
    // 是否循环
    loop: props.loop,
    autoplay: props.autoplay, // 自动播放
    // UED 提供的 动画的 json 文件
    animationData: props.animationData.default,
    name: props.name,
  })
  emits('getAnimation', animation.value)
})
</script>

<template>
  <!-- 渲染 lottie 动画 -->
  <div id="lottieId" ref="dom"></div>
</template>

<style scoped>
#lottieId {
  width: 100%;
  height: 100%;
}
</style>

在别的组件使用它

import Lottie from './components/Lottle.vue'

<Lottie :animation-data="Animation_1" />