深入浅出：element-ui中loading组件源码解析

2023-09-05 11:25:27

element-ui中loading组件概述

element-ui是一个基于Vue.js的前端框架，提供了一套丰富的UI组件库，其中loading组件是一个常用的加载组件，用于在页面加载数据时显示加载动画，为用户提供友好的反馈。

loading组件源码分析

loading组件的源码位于element-ui的源码目录下，具体路径为：

/packages/element-ui/src/components/loading/index.vue

打开该文件，我们可以看到loading组件的代码结构如下：

<template>
  <div class="el-loading">
    <div class="el-loading-spinner">
      <svg class="circular" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10" />
      </svg>
    </div>
    <div class="el-loading-mask"></div>
  </div>
</template>

<script>
export default {
  name: 'ElLoading',
  props: {
    fullscreen: Boolean,
    text: String,
    spinner: {
      type: String,
      default: 'circular'
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    handleAfterLeave() {
      this.$emit('after-leave')
    }
  }
}
</script>

<style>
.el-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
}

.el-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
</style>

从代码中我们可以看出，loading组件主要由以下几个部分组成：

模板部分：定义了组件的HTML结构，包括加载动画和遮罩层。
脚本部分：定义了组件的逻辑，包括属性、数据、方法等。
样式部分：定义了组件的样式，包括位置、颜色等。

使用loading组件

要使用loading组件，我们需要在Vue组件中导入该组件并进行注册，然后在需要显示加载动画的地方使用该组件。例如：

<template>
  <div>
    <el-button @click="showLoading">显示加载动画</el-button>
    <el-loading v-if="loading"></el-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    showLoading() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 3000)
    }
  }
}
</script>