Vue JS Spinner用于同一页面中的多个组件(单个应用程序)

时间:2018-10-23 09:42:00

标签: javascript vue.js

这是我的Vue.js应用。 要求是在每个组件的主体内加载单独的微调器。现在,它将为整个应用程序加载。任何其他微调插件也可以接受。

这是CDN

<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">

HTML低于

 <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>

1 个答案:

答案 0 :(得分:0)

您可能想研究vue-wait。可以与Vue一起使用,并且如果需要使用Vuex的话,可以选择将其使用..

  

vue-wait 帮助您管理页面上的多个加载状态,而无需   任何冲突。它基于管理数组的非常简单的想法   (或Vuex存储可选)具有多个加载状态。 内置   加载程序组件监听其注册的加载程序,并立即成为   加载状态。

他们对此也有很好的Medium post