原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
lottie动画在vue中的使用
loopComplete：当loop为true时，每次加载完成时触发
enterFrame：每进入一帧就会触发，播放时每一帧都会触发一次
segmentStart：每开始进入一帧就会触发，播放时每一帧都会触发一次
config_ready：config初始化时触发
data_ready：当动画的所有部分都加载完成时
DOMLoaded：当元素被添加到DOM中时
destroy：当动画被销毁时触发
封装基础组件
在vue中为了使用方便，可以封装为一个通用组件来使用。
template
component:is=props.tagref=container
slot/slot
/component
/template
script
importlottiefromlottie-web
import{ref,onMounted,onUnmounted,shallowRef}fromvue
//默认配置
constdefaultConfig={
renderer:svg,
loop:true,
autoplay:true,
constprops=defineProps({
tag:{
type:String,
default:div,
options:{
type:Object,
default:()=({}),
constcontainer=ref(null)
constinstance=shallowRef(null)
//处理配置animationData字段中assets部分的图片路径
//把动画需要的图片资源，放到public目录下的lotties目录下
//每个动画资源都在lotties下新建一个目录去存放
constparseAssets=(assets)={
constassetsBaseURL=process.env.VUE_APP_ROUTE_BASE_URL+/lotties
returnassets.map(item={
return{
...item,
u:assetsBaseURL+item.u,
constinit=()={
//配置
constconf={
...defaultConfig,
...props.options,
constassets=parseAssets(conf.animationData.assets||[]);
if(conf.animationData){
conf.animationData={...conf.animationData,assets};
instance.value=lottie.loadAnimation({
container:container.value,
...conf,
onMounted(()={
init();
onUnmounted(()={
if(instance.valueinstance.value.destroy){
instance.value.destroy();
/script
Web(airbnb.io)
文档评论（0）