Vue3-lottie动画的使用

安装

yarn add vue3-lottie@latest
// or
npm install vue3-lottie@latest --save

全局注册

main.js

import { createApp } from 'vue'
import Vue3Lottie from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'

const app = createApp(App)
app.use(Vue3Lottie).mount('#app')

// 1.重命名组件
// app.use(Vue3Lottie, { name: 'LottieAnimation' }) 
// 2.使用
// <LottieAnimation />

components.d.ts

// 要为Volar类型检查定义全局组件，需要添加：
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    LottieAnimation: typeof import('vue3-lottie')['Vue3Lottie']
  }
}

declare module '*.json' {
  const value: any;
  export default value;
}

export {}

使用组件

<template>
  <Vue3Lottie :animationData="DogJSON" :height="200" :width="200" />
</template>
 
<script setup>
import DogJSON from './lotties/dog.json'
</script>

相关配置

Prop	类型	默认值	描述
animationData	Object	{}	作为JSON对象提供的lottie动画数据
animationLink	String	''	Lottie动画数据的URL链接
width	Number or String	"100%"	lottie动画容器的宽度(数字对应像素值)
height	Number or String	"100%"	lottie动画容器的高度(数字对应像素值)
speed	Number	"1"	lottie动画的速度
direction	String	"forward"	动画播放方向
loop	Number or Boolean	true	lottie动画应该运行的实例数(true为无限)
autoPlay	Boolean	true	在组件加载时启动动画
delay	Number	0	延迟动画播放状态几毫秒
pauseOnHover	Boolean	false	是否在悬停时暂停动画
playOnHover	Boolean	false	当鼠标悬停时是否播放动画
backgroundColor	String	transparent	容器的背景颜色
renderer	String	"svg"	设置渲染器