material-pc-settle/src/components/pageLoading.vue

<template>
  <van-overlay :show="pageLoadingVisible"
    style="background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center;">
    <van-loading size="48px" vertical type="spinner" color="#fff">{{ laodingText }}</van-loading>
  </van-overlay>
</template>

<script>
import { Overlay, Loading } from 'vant'
export default {
  components: {
    [Overlay.name]: Overlay,
    [Loading.name]: Loading
  },
  data() {
    return {
      pageLoadingVisible: false,
      laodingText: '加载中'
    }
  },

  methods: {
    showPageLoading(laodingText) {
      this.pageLoadingVisible = true
      this.laodingText = laodingText || '加载中'
    },

    cloasePageLoading() {
      this.pageLoadingVisible = false
    }
  },
}
</script>

<style scoped></style>