vue 进入页面时加载loading图标
在网上找了很多方法，发现都比较麻烦，自已写了一个
思路，app.vue 共公组件引入 自定义的 Loading组件，其它组件调用方法使用jquery 的show()与fadeOut()方法控制显隐即可
1 .自定义的 Loading.vue 组件，前提vue需要引用 vant
<template>
<div class="loading"><van-loading type="spinner" /></div>
</template>
<script>
import Vue from 'vue';
import { Loading } from 'vant';
Vue.use(Loading);
export default {
name: 'Loading',
components:{
Loading
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loading{
position: fixed;
width:60px;
height: 60px;
margin:-30px 0 0 -30px;
background:rgba(0,0,0,0.5);
z-index: 9999;
top:50%;
left:50%;
text-align: center;
line-height:60px;
border-radius: 5px;
}
</style>2 app.vue 引入Loading.vue 组件
<template>
<div id="app">
<router-view/>
<Loading></Loading>
</div>
</template>
<script>
import Loading from './components/Loading.vue'
export default {
name: 'App',
components:{
Loading
}
}
</script>3 调用loading显示与隐藏，前提vue需要引用jquery
$('.loading').show(); //显示
$('.loading').fadeOut(); //隐藏示例
<script>
import $ from 'jquery'
export default {
name: 'Product',
created() {
$('.loading').show();
let that = this;
this.axios.post('/api/goods/goods').then(function (response) {
that.product = response.data;
$('.loading').fadeOut();
}).catch(function (error) {
console.log(error);
});
}
}
</script>
改进，装loading的调用方法封装到公共方法里
//loading
import $ from 'jquery'
function loading(sta){
if(sta == 1 || sta==true){
$('.loading').show();
}
if(sta == 0 || sta== false){
$('.loading').fadeOut();
}
}
export default {
loading
};vue如何添加共公自定义方法 http://www.51zuso.com/admin/p/665.html