<template>
  <div class="loading">
    <!-- <van-loading size="1.3rem" vertical type="spinner">加载中...</van-loading> -->
  </div>
</template>

<script>
export default {
  props: {
    show: Boolean,
  },
  data() {
    return {};
  },
  created() {
    // this.$toast.loading({
    //   message: "加载中...",
    //   forbidClick: true,
    //   loadingType: "spinner",
    //   duration: 0,
    // });
  },
  watch: {
    show: {
      handler(n, o) {
        console.log("子组件中的值： " + n);
        if (n) {
          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
            loadingType: "spinner",
            duration: 0,
          });
        } else {
          this.$toast.clear();
        }
      },
      deep: true, // 深度监听父组件传过来对象变化
    },
  },
};
</script>

<style scoped>
.loading {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 9999;
  background: #00000000;
  top: 0;
  right: 0;
  align-items: center;
  justify-content: center;
  display: flex;
}
</style>
