美文网首页
全局dialog,通过emit实现

全局dialog,通过emit实现

作者: 代瑶 | 来源:发表于2021-12-04 10:00 被阅读0次

    main.js

    
    app.config.globalProperties.$bus = mitt();
    app.config.globalProperties.$showLoading = "showLoading";
    

    app.vue

    <template>
      <div id="app">
        <router-view/>
    
        <van-overlay :show="showOverlay"
                     :custom-style="{background:'#ffffff00'}"
                     @click="showOverlay = false">
          <div class="dialog-layer">
            <div class="loading">
              <van-loading type="spinner" @click.stop/>
            </div>
          </div>
        </van-overlay>
      </div>
    </template>
    
    <script>
    import {Overlay, Loading} from 'vant'
    
    export default {
      components: {
        [Overlay.name]: Overlay,
        [Loading.name]: Loading,
      },
      data() {
        return {
          showOverlay: false
        }
      },
      mounted() {
        this.$bus.on(this.$showLoading, data => {
          console.log("状态"+data)
          this.showOverlay = data;
        })
      },
      methods: {
      }
    }
    </script>
    <style lang="less" scoped> 
    </style>
    
    

    test.vue

    
          this.$bus.emit(this.$showLoading, true);
          this.userInfo = await version({});
          this.$bus.emit(this.$showLoading, false);
    
    

    相关文章

      网友评论

          本文标题:全局dialog,通过emit实现

          本文链接:https://www.haomeiwen.com/subject/joevxrtx.html