vue全局loading组件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isLoading: false
},
mutations: {
// 控制loading显示隐藏
updateLoadingStatus(state, payload) {
state.isLoading = payload.isLoading
}
},
getters: {},
actions: {}
})
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isLoading: false
},
mutations: {
// 控制loading显示隐藏
updateLoadingStatus(state, payload) {
state.isLoading = payload.isLoading
}
},
getters: {},
actions: {}
})
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/index'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
// 实例化路由
const router = new Router({
routes
})
// 路由跳转前的钩子
router.beforeEach(function (to, from, next) {
store.commit('updateLoadingStatus', {isLoading: true})
next()
})
// 路由跳转后的钩子
router.afterEach(function (to) {
store.commit('updateLoadingStatus', {isLoading: false})
})
export default router
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/index'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
// 实例化路由
const router = new Router({
routes
})
// 路由跳转前的钩子
router.beforeEach(function (to, from, next) {
store.commit('updateLoadingStatus', {isLoading: true})
next()
})
// 路由跳转后的钩子
router.afterEach(function (to) {
store.commit('updateLoadingStatus', {isLoading: false})
})
export default router
<template>
<div id="app">
{{isLoading}}
<img src="./assets/logo.png">
<router-view/>
<loading v-model="isLoading"></loading>
</div>
</template>
<script>
import {mapState} from 'vuex'
import loading from './components/loading/loading.vue'
export default {
name: 'App',
components: {
loading
},
computed: {
...mapState({
isLoading: state => state.isLoading
})
}
}
</script>
<template>
<div id="app">
{{isLoading}}
<img src="./assets/logo.png">
<router-view/>
<loading v-model="isLoading"></loading>
</div>
</template>
<script>
import {mapState} from 'vuex'
import loading from './components/loading/loading.vue'
export default {
name: 'App',
components: {
loading
},
computed: {
...mapState({
isLoading: state => state.isLoading
})
}
}
</script>
vue全局loading组件的更多相关文章
- [vue开发记录]全局loading组件
上图不上种,菊花万人捅: loading.js: import './loading.css' let Loading = {} // 避免重复install,设立flag Loading.insta ...
- vue 全局自定义组件
1.vue文件 <template> <div style="position: absolute;bottom: 10px;text-align: center;widt ...
- Vue全局添加组件或者模块
import Api from './api.js' export default { install (Vue) { Vue.prototype.$Api = Api } } 这种格式就可以在mai ...
- vue 全局挂载组件
<!-- plugin.js --> import someComponent from './components/someComponent' export default { ins ...
- 自定义vue全局组件use使用
自定义一个全局Loading组件,并使用:总结目录:|-components |-loading |-index.js 导出组件,并且install |-loading.vue 定义Loading组件 ...
- 自定义vue全局组件use使用(解释vue.use()的原理)
我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...
- 自定义vue全局组件use使用、vuex的使用
自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...
- vue插件 使用use注册Vue全局组件和全局指令
插件一般会注册到全局使用 官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html 全局组件: .首先建一个自定义组件的文件夹,比如叫loading,里面有一个i ...
- vue 全局组件【原】
1.目录 2.内容 -Loading.vue <template> <div class="loading"> loading... </div> ...
随机推荐
- PHP 画图——使用jpgraph画图
1.要支持中文须要用到simhei.ttf和simsun.ttc这两个字体,在使用中文的时候须要使用SetFont(FF_SIMSUN,FS_BOLD)设置字体. 将须要的字体放入到项目文件夹下 ...
- base64和图片互转
pom.xml添加 <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec --> <dependen ...
- Java 解析excel2003和2007区别和兼容性问题(POI操作)
最近在使用POI对excel操作中发现一些问题,2003和2007的区别还是蛮大的: 2007相关的包: poi-3.9.jar poi-examples-3.8.jar poi-excelant-3 ...
- Deep Learning 30: 卷积理解
一.深度卷积神经网络学习笔记(一): 1. 这篇文章以贾清扬的ppt说明了卷积的实质,更说明了卷积输出图像大小应该为: 假设输入图像尺寸为W,卷积核尺寸为F,步幅(stride)为S(卷积核移动的步幅 ...
- hexSHA1散列加密解密(不可逆)
1.maven引入codec和commons依赖: <dependency> <groupId>commons-codec</groupId> <artifa ...
- Android vector Path Data画图详解
SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写.在xml文件中的标签是,画出的图形可以像一般的图片资源使用,例子如下: <vector xmlns ...
- 【FFT初识】
FFT在用于解决多项式乘法A*B(A和B为多项式,形如a0+a1*x^1+a2*x^2....)的时候,通俗地解释就是: 原理:先根据各自的系数各自转化为对应的向量(O(nlogn)),然后向量相 ...
- AutoIT: 开发界面结合GUI automation和Watir Automation
可以应用AutoIT开发出界面,从而把AutoIT对GUI的自动化测试与Watir对web的自动化测结合在一起.以下代码是我学习GUI界面开发的实例代码.1. 当点击Watir_Test_Button ...
- 【196】Dell 移动工作站系统安装方法
会出现找不到硬盘的情况,解决方法:安装系统的时候需要加载阵列卡驱动 下载阵列卡驱动,以 Dell T7610 为例根据安装系统进行选择,地址:http://zh.community.dell.com/ ...
- SAS基础 -- 逻辑库不存在问题解决
SAS安装 -- 逻辑库不存在问题解决 1.SAS打不开,将系统时间改为系统提示错误的时间: 2.请在以下两个路径下,新建SASCFG文件夹(注意红色部分为你电脑SAS的安装路径) D:\Prog ...