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

Question

这是我的 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>

Answer 1

您可能想查看 vue-wait .与 Vue 一起工作，如果你不得不使用它，可以选择与 Vuex 一起使用..

vue-wait helps to manage multiple loading states on the page without any conflict. It's based on a very simple idea that manages an array (or Vuex store optionally) with multiple loading states. The built-in loader component listens to its registered loader and immediately becomes a loading state.

他们也有一个不错的Medium post关于它。