全局dialog,通过emit实现

2021-12-04  本文已影响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);

上一篇 下一篇

猜你喜欢

热点阅读