这是我的Vue.js应用。 要求是在每个组件的主体内加载单独的微调器。现在,它将为整个应用程序加载。任何其他微调插件也可以接受。
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3/dist/vue-loading.css" rel="stylesheet">
<main id="app">
<div class="clearfix" style="width:200px;height: 200px; border:1px solid; border-color: #ff0000">
cgg <comp1-loading><loading :active.sync="visible" :can-cancel="true"></loading></comp1-loading>gg
</div>
<div class="clearfix" style="width:200px;height: 200px; border:1px solid; border-color: #ff0000">
cgg <comp1-loading><loading :active.sync="visible" :can-cancel="true"></loading></comp1-loading>gg
</div>
<h1>Vue Loading Overlay demo</h1>
<button @click.prevent="open()">Programmatic show</button>
<button @click.prevent="show()">Component show, cancellable</button>
<hr>
</main>
Vue.js应用组件在这里。同一应用程序中有2个组件,因此我想分别加载每个组件。
<script>
Vue.use(VueLoading);
Vue.component('comp1-loading', {
data: function () {
return {
loading: true,
dataList:[],
something: false,
message:"fgd"
}
},
mounted(){
this.fetchData();
let loader = this.$loading.show({
loader: 'dots'
});
setTimeout(() => loader.hide(), 3 * 1000)
},
methods:{
fetchData:function(){
var vm=this;
vm.message="Hai this is spinner div";
},
serverDateFormat: function(date) {
}
},
template: `<div >{{message}}</div>`
})
Vue.component('comp2-loading', {
data: function () {
return {
loading: true,
dataList:[],
something: false,
message:"fgd"
}
},
mounted(){
this.fetchData();
let loader = this.$loading.show({
loader: 'dots'
});
setTimeout(() => loader.hide(), 2 * 1000)
},
methods:{
fetchData:function(){
var vm=this;
vm.message="Hai cthis is spinner div";
},
serverDateFormat: function(date) {
}
},
template: `<div >{{message}}</div>`
})
Vue.use(VueLoading);
let app = new Vue({
el: '#app',
data() {
return {
visible: true
}
},
components: {
Loading: VueLoading
},
methods: {
open() {
console.log('open was clicked, will auto hide');
let loader = this.$loading.show({
loader: 'dots'
});
setTimeout(() => loader.hide(), 3 * 1000)
},
show() {
console.log('show was clicked, click to hide');
// do AJAX here
this.visible = true
}
}
});
</script>
答案 0 :(得分:0)
您可能想研究vue-wait。可以与Vue一起使用,并且如果需要使用Vuex的话,可以选择将其使用..
vue-wait 帮助您管理页面上的多个加载状态,而无需 任何冲突。它基于管理数组的非常简单的想法 (或Vuex存储可选)具有多个加载状态。 内置 加载程序组件监听其注册的加载程序,并立即成为 加载状态。
他们对此也有很好的Medium post。