效果：

组件代码：

<template>
  <div
    class="loading-wrap"
    ref="loadingWrap"
    :style="[
   { borderRadius: styles.borderRadius || '4px' },
   { borderColor: styles.borderColor || '#409eff' },
   { border: loading ? '1px solid #409eff' : '1px solid transparent' },
   { cursor: loading ? 'not-allowed' : 'auto'}
  ]"
  >
    <div
      class="loading-inner-box"
      :style="[
   { borderRadius: styles.borderRadius || '4px' },
   { pointerEvents: loading ? 'none' : 'auto' }
  ]"
    >
      <div :style="[
        { opacity: loading ? 0.7 : 1 },
      ]">
        <slot></slot>
      </div>
    </div>

    <div
      v-show="loading"
      class="loading-chunk"
      :style="[
    { animationDuration: `${speed || 2}s` },
    { background: styles.borderColor || '#409eff' },
    ]"
    ></div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  styles: {
    type: Object,
    default: () => ({
      borderRadius: "4px",
      borderColor: "#409eff"
    })
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 转速 (单位：秒)
  speed: {
    type: Number,
    default: 2
  }
});
</script>

<style scoped lang="scss">
.loading-wrap {
  box-sizing: border-box;
  width: fit-content;
  padding: 2px;
  position: relative;
  overflow: hidden;
}

.loading-wrap .loading-inner-box {
  background: #fff;
  position: relative;
  z-index: 10;
}

.loading-wrap .loading-chunk {
  z-index: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vw;
  background: #409eff;
  transform-origin: top left;
  animation: rotateAnimation 2s linear infinite;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

使用组件:

<template>

  <Test2 styles :loading="loading">
    <el-button>加数据.......</el-button>
  </Test2>

  <Test2 styles :loading="loading" style="margin-top: 10px">
    <div style="width: 100px; height: 100px; background: #ccc;"></div>
  </Test2>

  <Test2 styles :loading="loading" style="margin-top: 10px">
    <div style="width: 300px; height: 300px; background: #ccc;"></div>
  </Test2>
  <el-button type="primary" @click="loading = !loading" style="margin-top:40px">改变</el-button>
</template>
  
<script setup>

import Test2 from "./components/test2.vue";

import { ref } from "vue";
const loading = ref(false);

</script>

配置：组件内有标注