使用Loading分为2种情况，第一种是使用一些组件库自带的loading，另一种是使用我们自己写的loading，现分开介绍使用方法
一、使用element ui 带的Loading
1、在main.js 中引入axios 和elementui
// 引入element-ui 组件
import ElementUI from 'element-ui'
// 引入element-ui 样式文件
import 'element-ui/lib/theme-chalk/index.css'
import axios from "axios"
Vue.use(ElementUI)
Vue.prototype.$axios = axios
2、在main.js 中设置Loading 显示和关闭函数
let loading;
function startLoading() {
//如果根实例设为变量VUE var VUE = new Vue({}) 也可写成下面的
// loading = VUE.$loading({
// lock: true,
// text: "拼命加载中...",
// background: 'rgba(0,0,0,0.2)'
// })
loading = ElementUI.Loading.service({
lock: true,
text: "加载中...",
background: 'rgba(0,0,0,0.2)'
})
}
function endLoading() {
loading.close()
}
3、同样在main.js 中设置请求和响应拦截器
// 请求数据拦截器
axios.interceptors.request.use(config => {
console.log("拦截器")
startLoading()
return config
})
// 响应数据拦截器
axios.interceptors.response.use(response => {
endLoading()
return response
})
二、使用自己在页面中写的Loading
1、新建一个loading.vue 组件
正在加载
// import theme from '@/assets/js/theme/shine.js'
export default {
data() {
return {};
},
methods: {},
mounted(){
var spanli = document.getElementById("loading").getElementsByTagName("span");
for(var i=0;i
spanli[i].style.webkitAnimationDelay = 0.13*i+"s"
}
}
};
.loader {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 20;
}
.loading {
position: absolute;
width: 70px;
height: 70px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.loading span {
display: inline-block;
width: 8px;
height: 30px;
border-radius: 3px;
margin: 3px;
background: #5af3f3;
-webkit-animation:line-square 1s infinite;
}
.text{color:#5af3f3;}
@-webkit-keyframes line-square{
0%{
transform:scaleY(1)
}
50%{
transform:scaleY(0.3)
}
100%{
transform:scaleY(1)
}
}
2、在App.vue 引入注册并使用loading.vue组件
首页
图表
表格
表单测试
布局容器
{{message}}
import Loading from "@/components/loading.vue"
export default {
name: 'App',
data(){
return{
}
},
components:{Loading},
}
3、在store 中初始化loadingShow
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
loadingShow:false
},
mutations: {
},
actions: {
},
modules: {
}
})
4、在main.js中设置请求和响应拦截器
// 请求数据拦截器
axios.interceptors.request.use(config => {
console.log("拦截器")
//startLoading()
store.state.loadingShow = true
return config
})
// 响应数据拦截器
axios.interceptors.response.use(response => {
//endLoading()
store.state.loadingShow = false
return response
})
