VUE-ElementUI 自定义Loading图操作

下面是关于VUE-ElementUI 自定义Loading图操作的完整攻略及示例：

1. 什么是VUE-ElementUI自定义Loading图操作？

在web开发中，我们经常会遇到需要显示loading效果的场景，来提示用户当前正在加载中。VUE-ElementUI自带的Loading组件在满足一些基础需求的同时，也有不足的地方。因此，我们可以通过自定义Loading图来优化用户的体验。

2. 如何进行VUE-ElementUI自定义Loading图操作？

2.1 确定Loading图大小和样式

首先，我们需要确定Loading图的大小和样式。常见的Loading图样式可以参考 cssload.net 和 loading.io。

2.2 创建组件

接着，创建一个自定义Loading组件，在组件的模板中加入Loading图。

<template>
  <div class="custom-loading">
    <div class="loading-img"></div>
  </div>
</template>

<style>
.custom-loading {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-img {
  width: 80px;
  height: 80px;
  animation: loading 2s linear infinite;
  /* 加载图的样式 */
}

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

2.3 注册组件

在main.js中引入并注册组件。

import CustomLoading from "@/components/CustomLoading.vue";

Vue.component("CustomLoading", CustomLoading);

2.4 使用组件

在需要显示Loading图的地方，使用<CustomLoading />标签即可。例如，在某个按钮的点击事件中需要显示Loading图，代码如下：

<template>
  <div>
    ... // 其他组件内容
    <button @click="handleClick">点击我</button>
    ... // 其他组件内容
    <CustomLoading v-if="loading"></CustomLoading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    };
  },
  methods: {
    handleClick() {
      this.loading = true;
      // 处理异步操作
      setTimeout(() => {
        this.loading = false;
      }, 2000);
    }
  }
};
</script>

3. 示例

3.1 示例一

下面是一个简单的示例，展示了如何在组件的created生命周期中动态修改Loading图的样式。

<template>
  <div>
    <CustomLoading :img="loadingImg"></CustomLoading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadingImg: {
        // 默认样式
        width: "50px",
        height: "50px",
        backgroundColor: "#fff",
        borderRadius: "50%",
        boxShadow: "0 3px 5px rgba(0, 0, 0, 0.2)",
        animation: "loading 1s linear infinite"
      }
    };
  },
  created() {
    // 修改样式
    setTimeout(() => {
      this.loadingImg.width = "100px";
      this.loadingImg.height = "100px";
      this.loadingImg.backgroundColor = "#ccc";
      this.loadingImg.borderRadius = "0";
      this.loadingImg.boxShadow = "none";
    }, 3000);
  }
};
</script>

3.2 示例二

下面是一个复杂一些的示例，展示了如何在axios请求中显示和隐藏自定义Loading图。

<template>
  <div>
    <button @click="handleClick">发起请求</button>
    <ul>
      <li v-for="(item, index) in data" :key="index">{{ item }}</li>
    </ul>
    <CustomLoading v-if="loading" :img="loadingImg"></CustomLoading>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      data: [],
      loading: false,
      loadingImg: {
        // 默认样式
        width: "50px",
        height: "50px",
        backgroundColor: "#fff",
        borderRadius: "50%",
        boxShadow: "0 3px 5px rgba(0, 0, 0, 0.2)",
        animation: "loading 1s linear infinite"
      }
    };
  },
  methods: {
    handleClick() {
      this.loading = true;
      axios
        .get("https://jsonplaceholder.typicode.com/todos")
        .then(res => {
          this.data = res.data.map(item => item.title);
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

以上便是关于VUE-ElementUI自定义Loading图操作的完整攻略及示例。