Lottie(动画)
简介
在vue中请求接口的过程中展示一个Lottie动画关于如何创建与使用可以点击查看,内有详细说明。
案例
1.首先在components中创建一个vue组件,用于存储Lottie动画
2.在Lottie_lottie.vue中写
<template>
<lottie :options="defaultOptions" :height="200" :width="200" />
</template>
<script>
import * as lottieJson from "../assets/9844-loading-40-paperplane.json";
export default {
data() {
return {
defaultOptions: {
animationData: lottieJson.default /*文件资源*/,
},
};
},
};
</script>
提示:引入的json文件为动画json源码,不懂的还是可以查看:点我
3.在需要用到此组件的组件内引入此组件
<template>
<div>
<Article :articleList="alist" @handleDel="delArticle"></Article>
<Lottie v-if="fa"></Lottie>
</div>
</template>
<script>
import Article from "../../components/Article.vue";
import Lottie from "../../components/Lottie_lottie.vue"; //lottie组件
export default {
data() {
return {
alist: [],
fa: true,
};
},
components: {
Article,
Lottie
},
created() {
this.location();
},
methods: {
async location() {
const { data } = await this.$axios.get(
`http://127.0.0.1:3000/api/blog/list/2`
);
if (data.code === 200) {
this.fa = false;
}
this.alist = data.data;
},
},
};
</script>
解析:引入lottile组件后,设置此组件 v-if 为 true,当接口调用成功后将 v-if 设置为 false,以此达到 数据出现前lottile动画展示 的效果。
nprogress(进度条)
简介
nprogress是页面跳转时出现在浏览器顶部的进度条
安装
使用npm: npm install nprogress --save
引入和使用
介绍两个函数,start用于开始,done用于结束
NProgress.start();
NProgress.done();
引入:
import NProgress from "nprogress";
import "nprogress/nprogress.css";
使用:
async beforeRouteEnter(to, from, next) {
NProgress.start();
const { data } = await $axios.get(`http://127.0.0.1:3000/api/blog/list/1`);
next((vm) => vm.location(data));
},
methods: {
async location(data) {
if (data.code === 200) {
NProgress.done();
this.fa = false;
}
this.alist = data.data;
},
}