Vue通过状态为页面切换添加loading、为ajax加载添加loading
以下方法需要引入vuex,另使用了vux的UI框架,ajax添加loading还引入了axios。
一、为页面切换添加loading。
loading.js:
import Vue from 'vue'
import Vuex from 'vuex'
import router from './router' Vue.use(Vuex) const store = new Vuex.Store({}) // 这里你可能已经有其他 module store.registerModule('myVux', { // 名字自己定义
state: {
isLoading: false
},
mutations: {
updateLoadingStatus (state, payload) {
state.isLoading = payload.isLoading
}
}
})
router.beforeEach(function (to, from, next) {
store.commit('updateLoadingStatus', {isLoading: true})
next()
}) router.afterEach(function (to) {
store.commit('updateLoadingStatus', {isLoading: false})
}) export default store;
main.js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'
import store from './loading' Vue.use(Vuex)
Vue.use(router) new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
}
})
App.vue:
//在模板中加入以下vux组件
<loading :text="loadText" v-model="isLoading"></loading> import { Loading } from 'vux'
import { mapState } from 'vuex' export default {
name: 'app',
data(){
return {
loadText:"loading"
}
},
components: {
Loading
},
computed:{
...mapState({
isLoading: state => state.myVux.isLoading
})
}
}
二、为ajax添加loading(发送请求时显示,返回数据时消失)。
loading.js:
import Vue from 'vue'
import Vuex from 'vuex' import Axios from 'axios'
Vue.use(Vuex)
Axios.interceptors.request.use(config => {
console.log('ajax begin request')
store.commit('ajaxStar')
return config;
}) Axios.interceptors.response.use(config => {
console.log('ajax get response')
store.commit('ajaxEnd')
return config
})
store.registerModule('myVux', { // 名字自己定义
state: {
ajaxIsLoading: false
},
mutations: {
ajaxStar (state) {
state.ajaxIsLoading = true
},
ajaxEnd (state) {
state.ajaxIsLoading = false
}
},
getter : {
ajaxIsLoading: state => state.ajaxIsLoading
}
})
export default store;
main.js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'
import store from './loading' Vue.use(Vuex)
Vue.use(router) new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
}
})
App.vue:
//在模板中加入以下vux组件
<loading :text="loadText" v-model="ajaxIsLoading"></loading> import { Loading } from 'vux'
import { mapState } from 'vuex' export default {
name: 'app',
data(){
return {
loadText:"loading"
}
},
components: {
Loading
},
computed:{
...mapState({
ajaxIsLoading: state => state.myVux.ajaxIsLoading }) } }
Vue通过状态为页面切换添加loading、为ajax加载添加loading的更多相关文章
- ajax加载菊花loading效果
Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...
- Entity Framework加载相关实体——延迟加载Lazy Loading、贪婪加载Eager Loading、显示加载Explicit Loading
Entity Framework提供了三种加载相关实体的方法:Lazy Loading,Eager Loading和Explicit Loading.首先我们先来看一下MSDN对三种加载实体方法的定义 ...
- JQuery+CSS3实现Ajax加载时loading效果
之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...
- fakeLoader页面加载前loading演示8种效果
提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- 页面加载时loading效果
页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- HTML页面处理以及资源文件的加载
Javascript 异步加载详解 这篇文章很详细的介绍了HTML的页面处理以及资源文件的加载. 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading ...
- 《动手实现一个网页加载进度loading》
loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...
- jquery mobile 的loading提示“正在加载...”在不同版本中的不同实现方式
在jquery mobile开发中,在页面的切换.或者ajax获取数据时由于网速慢等其他原因,会有一个加载的时间,如果能在这段时间给一个“正在加载...”的提示,用户体验会更好.下面来简单的介绍一下在 ...
随机推荐
- Servlet编程实例 续4
---------------siwuxie095 JSP+Servlet+JDBC 继续完善登录实例,将校验逻辑改为:从数据库中获取用户信息进行校验 数据库准备 在 Navicat for MySQ ...
- docker启动
启动容器 启动容器有两种方式,一种是基于镜像新建一个容器并启动,另外一个是将在终止状态(stopped)的容器重新启动. 因为 Docker 的容器实在太轻量级了,很多时候用户都是随时删除和新创建容器 ...
- DBVisualizer Pro for mac
公司使用的是DB2数据库,支持DB2的数据库客户端常用的有DBeaver和DBVisualizer.DBeaver是免费的,但本人电脑安装后,启动一直报错,问题一直没解决就放弃了.改用DBVisual ...
- VS编译器中设置 输出窗口 只显示error,不显示warning 要如何配置
VS编译器中设置 输出窗口 只显示error,不显示warning 要如何配置 在编译大型项目的时候,总是VS编译器的输出窗口总是会出现一堆warning警告,要想在里面找到error错误,要使用鼠标 ...
- R: 关于 table 函数的应用
################################################### 问题:关于 table 函数 18.5.9 来一个关于 table 函数的例子,说明tabl ...
- 15、TSA数据上传(https://www.ncbi.nlm.nih.gov/genbank/tsaguide/#SP)
https://www.ncbi.nlm.nih.gov/genbank/tsa/ https://www.ncbi.nlm.nih.gov/genbank/tsaguide ...
- java String编码转换
/** * Get XML String of utf-8 * * @return XML-Formed string */ public static String getUTF8XMLString ...
- Vue.js 源码实现
目录 Vue.js 代码实现 1. 步骤一 2. 步骤二 3.步骤三 Vue.js 工作机制 初始化 编译 响应式 虚拟dom 更新视图 编译 Vue.js 代码实现 检验学习效果的最好方法就是自己造 ...
- HyperLedger Explore 浏览器配置启动教程
Hyperledger Fabric维护的实际上是一个区块链网络.为了能够直观的观察网络上的节点,交易等行为,Hyperledger Explore随之诞生. 本文讲述如何搭建 Hyperledger ...
- 一起来造一个RxJava,揭秘RxJava的实现原理
一类创业者基本都是做传统行业的,这类创业者非常大胆,也非常舍得投入.很多时候他们如果看到或者想到一个商机,就会投入成千上百万,先把产品做出来,然后再去想怎么开拓市场. 这类传统行业的老板,问我最多的问 ...