JG-CLIENT-TEMP/src/components/FullLoading/index.vue

<template>
  <!--  components/Loading/index.vue-->
  <div v-show="isShow" class="loading">
    <div>
      <div class="loading-content">
        <img
          src="/logo.png"
          style="width: 400px; height: 400px"
          object-fit="cover"
        />
      </div>
      <div class="titleText">正在加载...</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const isShow = ref(true); //定位loading 的开关

const show = () => {
  isShow.value = true;
};
const hide = () => {
  isShow.value = false;
};
//对外暴露 当前组件的属性和方法
defineExpose({
  isShow,
  show,
  hide,
});
</script>

<style scoped lang="scss">
.loading {
  position: fixed;
  z-index: 999999;
  inset: 0;
  background: #f1f3f5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  @include flex;
  .loading-content {
    animation: rotate 4s linear infinite;
  }
  .titleText {
    margin-top: 10px;
    text-align: center;
  }
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>