uniapp 自定义一个和showLoading一样的全局弹窗

在uni-app中，可以通过自定义组件来实现一个和showLoading一样的全局弹窗。

首先，在项目中创建一个自定义组件，命名为my-loading：

在components目录下创建my-loading文件夹
在my-loading文件夹下创建my-loading.vue文件
在my-loading.vue文件中编写组件的模板和样式，并添加props和methods

下面是my-loading.vue的代码示例：

<template>
  <div class="my-loading" v-show="show">
    <div class="my-loading__spinner">
      <div class="my-loading__bounce1"></div>
      <div class="my-loading__bounce2"></div>
      <div class="my-loading__bounce3"></div>
    </div>
    <div class="my-loading__text">{{text}}</div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: '加载中...'
    }
  },
  methods: {
    hide() {
      this.$emit('hide')
    }
  }
}
</script>

<style>
.my-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.my-loading__spinner {
  width: 70px;
  text-align: center;
  margin: 0 auto;
}

.my-loading__spinner > div {
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 100%;
  display: inline-block;
  animation: my-loading__bounce 1.4s infinite ease-in-out both;
}

.my-loading__spinner .my-loading__bounce1 {
  animation-delay: -0.32s;
}

.my-loading__spinner .my-loading__bounce2 {
  animation-delay: -0.16s;
}

@keyframes my-loading__bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.my-loading__text {
  margin-top: 10px;
  font-size: 14px;
  color: #ffffff;
}
</style>

在my-loading.vue中，我们使用了flex布局来居中显示加载中的动画和文字。动画使用了CSS3的animation属性，实现了三个小球交替跳动的效果。同时，我们还定义了两个props：show和text，通过这两个props来控制和显示组件的状态和内容。

接下来，在App.vue中全局引入my-loading组件，并在methods中定义一个showLoading和hideLoading方法，用来控制显示和隐藏my-loading组件。具体代码如下：

<template>
  <div>
    <my-loading :show="showLoading" @hide="hideLoading" />
    <router-view />
  </div>
</template>

<script>
import MyLoading from '@/components/my-loading/my-loading'

export default {
  components: {
    MyLoading
  },
  data() {
    return {
      showLoading: false
    }
  },
  methods: {
    showLoading(text = '加载中...') {
      this.showLoading = true
    },
    hideLoading() {
      this.showLoading = false
    }
  }
}
</script>

在App.vue中，我们首先引入了my-loading组件，并在data中定义了一个showLoading的变量，用来控制my-loading组件的显示和隐藏。然后，在methods中定义了showLoading和hideLoading方法，当调用showLoading方法时，将showLoading变量设置为true，从而显示my-loading组件；当调用hideLoading方法时，将showLoading变量设置为false，从而隐藏my-loading组件。

最后，我们可以在任意一个页面中调用showLoading方法来显示my-loading组件，调用hideLoading方法来隐藏my-loading组件，实现全局弹窗的效果。具体代码如下：

<template>
  <div>
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    getData() {
      this.$parent.showLoading()
      // 发送请求获取数据
      // 请求成功后，隐藏loading
      setTimeout(() => {
        this.$parent.hideLoading()
      }, 2000)
    }
  }
}
</script>

在上面的代码中，我们在点击按钮时调用了showLoading方法显示my-loading组件，并在获取数据成功后，使用setTimeout方法延迟2秒钟调用hideLoading方法，从而隐藏my-loading组件。

通过以上步骤，我们就实现了一个和showLoading一样的全局弹窗。需要注意的是，如果需要修改my-loading组件的样式和动画效果，可以根据自己的需求进行修改