element ui loading组件源码是怎样的

Element UI 的 loading 组件源码如下所示：

<template>
  <div class="el-loading-mask" v-if="visible" :style="maskStyle">
    <div class="el-loading-spinner" :style="spinnerStyle">
      <svg viewBox="25 25 50 50" class="circular">
        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
      </svg>
      <p v-if="text" class="el-loading-text">{{ text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ElLoading',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    text: String,
    fullscreen: Boolean,
    spinner: {
      type: String,
      default: 'el-icon-loading'
    },
    background: {
      type: String,
      default: 'rgba(255, 255, 255, 0.7)'
    }
  },
  computed: {
    maskStyle() {
      return {
        backgroundColor: this.background
      };
    },
    spinnerStyle() {
      return {
        fontSize: this.fullscreen ? '80px' : '40px'
      };
    }
  }
};
</script>

<style scoped>
.el-loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.circular {
  animation: rotate .8s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.el-loading-text {
  margin-top: 10px;
  font-size: 14px;
}
</style>

以上是简化过的代码，包含了 loading 组件的模板、脚本和样式部分。

在模板中，使用了 `v-if` 指令判断 `visible` 属性是否为 true，控制 loading 遮罩层的显示与隐藏。loading 遮罩层内部包含了一个 loading 动画的 SVG 图标和一个文本提示。

在脚本部分，定义了组件的名称为 `ElLoading`，并接收了一些属性，如 `visible` 控制 loading 的显示与隐藏、`text` 设置文本提示、`fullscreen` 是否全屏显示、`spinner` 设置 loading 动画图标、`background` 设置遮罩层背景色。还使用了计算属性来动态设置遮罩层和 loading 动画的样式。

在样式部分，设置了 loading 遮罩层的样式，并定义了 loading 动画的旋转效果以及文本提示的样式。

以上就是 Element UI loading 组件的简化源码。希望对您有所帮助！如有任何疑问，请随时提问。