vue：loading动画

1.更改入口文件main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import * as filters from './utils/filters'
// VantUI组件库
import Vant from 'vant'
import 'vant/lib/index.css'// 把VantUI当做一个插件，在Vue中使用
Vue.use(Vant)Vue.config.productionTip = false// 注册过滤器
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))window.app = new Vue({router,store,render: h => h(App)
}).$mount('#app')

2.在ajax.js文件处理

import axios from 'axios'export const ajax = axios.create({headers: {source: 'h5',icode: 'acbd','Content-Type': 'application/x-www-form-urlencoded'},withCredentials: true
})
ajax.interceptors.request.use(function (config) {// 在发送请求之前做些什么console.log('请求拦截到了')window.app.$toast.loading({message: '加载中...',forbidClick: true,loadingType: 'spinner'})return config
}, function (error) {// 对请求错误做些什么window.app.$toast.clear()return Promise.reject(error)
})ajax.interceptors.response.use(function (response) {// 对响应数据做点什么console.log('响应拦截到了')window.app.$toast.clear()return response
}, function (error) {// 对响应错误做点什么if (error.response) {if (error.response.status === 401) {window.alert('未登录，即将跳转到登录页面')} else if (error.response.status === 500) {window.app.$notify({message: '服务器正忙，请稍后重试',type: 'danger'})// window.alert('服务器正忙，请稍后重试')}}window.app.$toast.clear()return Promise.reject(error)
})

vue：loading动画相关推荐

axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...
首先新建一个 loading.vue组件,写loading动画效果 .loader { width: 100%; height: 100%; display: flex; align-items: c ...
【Vue+Element UI】关闭指定某一个页面的loading动画
[Vue+Element UI]关闭指定某一个页面的loading动画模板:vue-admin-template v4.4.0 问题描述:由于vue-admin默认配置了全局loading,所以页面 ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
electron-vue 项目添加启动loading动画问题
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
html设置loading,几个纯CSS实现的loading动画
或者是因为网页体积较大,又或者是由于使用vue一类的前端库,浏览者在打开网页时往往会出现一段时间的白屏,通常的做法是在网页未完成首屏渲染时,向用户展示一个loading动画,页面渲染好了后再隐藏loa ...
CSS学习--DIY Loading动画
首先要知道什么是CSS3动画?然后才能做出自己想要的动画效果.下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍,希望对你有用. 动画是使元素从一种样式逐渐变 ...
分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
一款炫酷Loading动画--载入成功
简单介绍昨天在简书上看到一篇文章.介绍了一个载入动画的实现过程一款Loading动画的实现思路(一) 仅仅可惜原动画是IOS上制作的.而看了一下.作者的实现思路比較复杂,于是趁着空暇写了一个And ...
loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
android loading封装_我们经常用的Loading动画居然还有这种姿势
背景 Loading动画几乎每个Android App中都有. 一般在需要用户等待的场景,显示一个Loading动画可以让用户知道App正在加载数据,而不是程序卡死,从而给用户较好的使用体验. 同样的 ...

vue：loading动画

vue：loading动画相关推荐

最新文章

热门文章