Vue3+vite使用LottieFiles/lottie

您所在的位置:网站首页 vue引入图片报错 Vue3+vite使用LottieFiles/lottie

Vue3+vite使用LottieFiles/lottie

2023-04-13 15:38| 来源: 网络整理| 查看: 265

Vue3+vite使用LottieFiles/lottie-web,阿里图标动效库

本文将介绍Vue3中使用动效库内容。

动效下载

动效库可以在阿里图标下载也可以在这个LottieFiles官网下载,下载Json格式文件即可。 在这里插入图片描述

安装

需要安装lottie-web这个库,vue2好像需要安装另一个库,外国网站,文档不太友好,百度一下。

npm install lottie-web --save 在Vue3中使用lottie-web

在这里插入图片描述 代码

import { ref, onMounted } from "vue";//引入相关api import lottie from "lottie-web";//引入动效库 import json001 from "~src/assets/json/json001.json";//引入下载的动效json const animation1 = ref(null) //获取dom onMounted(() => { //在这个生命周期渲染 lottie.loadAnimation({ container: animation1.value,//选择渲染dom renderer: "svg",//渲染格式 loop: true,//循环播放 autoplay: true//是否i自动播放, animationData: json001,//渲染动效json }); } 总结

这样就可以使用了,如果您遇到什么问题,可以随时联系我。 码字不易,点个赞。 这样就可以使用了,如果您遇到什么问题,可以随时联系我。 码字不易,点个赞。 这样就可以使用了,如果您遇到什么问题,可以随时联系我。 码字不易,点个赞。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3