Lottie 动画

基于 lottie-web 封装，用于播放 Lottie 动画。可在 LottieFiles 获取动画资源。

基础用法

<template>
  <div>
    <MLottie
      class="lottie-box"
      :data="data404"
      width="400px"
      height="400px"
    ></MLottie>

    <MMarkdownView :value="readme"></MMarkdownView>
  </div>
</template>

<script setup lang="ts">
import data404 from '@/assets/lottie/not-found-404.json'
import readme from '@/components/lottie/README.md?raw'
</script>

<style lang="scss" scoped></style>

API

Lottie 属性

属性名	说明	类型	默认值
config	lottie.loadAnimation 参数	AnimationConfig	{}
width	容器宽度	string	'100%'
height	容器高度	string	'100%'
data	动画 JSON 数据（animationData）	object	—

Lottie 事件

事件名	说明	类型
created	动画实例创建完成	(anim: AnimationItem) => void

Exposes

名称	说明	类型
anim	lottie.loadAnimation 返回的实例	AnimationItem
destroy	销毁动画	() => void