VUE-ElementUI 自定义Loading图操作

下面我将详细讲解“VUE-ElementUI 自定义Loading图操作”的完整攻略。

1. 为什么要自定义Loading图

在前端开发中，经常需要向后端请求数据，但是网络请求是一个耗时的过程，为了给用户更好的体验，通常会使用Loading图来显示页面正在加载数据的状态。而ElementUI自带的Loading组件，在一些特殊情况下并不能满足我们的需求，这时我们需要对其进行自定义。

2. 使用ElementUI自定义Loading组件

ElementUI为我们提供了非常方便的Loading组件，让我们可以很方便地实现Loading效果。我们可以在需要显示Loading的地方加上一个<el-loading>标签，然后设置一些参数，比如text属性可以设置提示文字，fullscreen属性可以使Loading全屏显示。

下面是一个示例：

<template>
  <div class="container">
    <el-button @click="handleClick">显示Loading</el-button>
    <el-loading :text="loadingText" :fullscreen="true" v-if="loading"></el-loading>
    <div v-show="!loading">
      这里是页面内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      loadingText: '加载中...'
    }
  },
  methods: {
    handleClick() {
      this.loading = true
      // 模拟请求数据
      setTimeout(() => {
        this.loading = false
      }, 2000)
    }
  }
}
</script>

<style>
.container {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

这个示例中，我们在<el-loading>标签中设置了text属性为"加载中..."，并且设置了fullscreen属性为true，使Loading全屏显示。在点击按钮后，我们将loading设置为true，然后模拟一个请求数据的过程，最后将loading设置为false，这时Loading就会消失，页面内容就会显示出来。

3. 自定义Loading组件

如果我们需要更进一步地自定义Loading组件，比如改变Loading图标、增加动画效果等，这时我们就需要自定义组件。下面是一个自定义Loading组件的示例：

<template>
  <div class="custom-loading" v-show="loading">
    <div class="loading-box">
      <i class="el-icon-loading"></i>
      <span>正在加载...</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style>
.custom-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-box {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.loading-box i {
  font-size: 36px;
  margin-right: 10px;
  animation: rotate 1s linear infinite;
}

.loading-box span {
  font-size: 18px;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>

这个示例中，我们创建了一个名为CustomLoading的组件，它只包含了一个Loading动画，而没有文字提示。首先，我们在组件中定义了一个loading属性，用来控制Loading的显示与隐藏。然后，在模板中，我们创建了一个名为loading-box的元素，用来包含Loading图标和文字提示。在样式中，我们定义了一个名为custom-loading的类，用来设置Loading动画的全屏样式，loading-box的样式用来设置Loading图标和文字提示的样式。其中，在.loading-box i类中，我们用CSS动画实现了Loading图标的旋转效果。

最后，我们在需要显示Loading的地方，使用<CustomLoading :loading="loading"></CustomLoading>标签即可。

4. 总结

自定义Loading组件可以更好地满足我们的需求，可以让我们更自由地控制Loading的样式、动画等效果。ElementUI提供了丰富的组件库，我们可以很方便地实现自定义Loading组件。