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