Vue 2.x 折腾记：从头到尾打造加载组件

前端

2023-09-15 23:50:58

前言

在前端开发中，加载组件是一个必不可少的元素。它可以帮助用户了解当前正在进行的数据加载或其他耗时操作，避免用户因为等待而产生焦虑或不耐烦的情绪。

本文将介绍如何使用 Vue 2.x 来构建一个中规中矩的加载组件。我们将从头开始，一步一步地讲解如何实现组件的基本功能和样式。同时，我们还将介绍一些高级技巧，例如如何使用 CSS3 和 JavaScript 来实现酷炫的动画效果。

组件结构

我们的加载组件将由以下几个部分组成：

HTML 模板：负责定义组件的结构和样式。
JavaScript 文件：负责定义组件的逻辑和行为。
CSS 文件：负责定义组件的样式。

HTML 模板

首先，我们先来看一下组件的 HTML 模板。

<template>
  <div class="loading-container">
    <div class="loading-icon"></div>
    <div class="loading-text">{{ text }}</div>
  </div>
</template>

在这个模板中，我们定义了一个名为 loading-container 的容器元素，里面包含了一个名为 loading-icon 的图标元素和一个名为 loading-text 的文本元素。图标元素用于显示加载动画，文本元素用于显示加载提示信息。

JavaScript 文件

接下来，我们来看看组件的 JavaScript 文件。

export default {
  name: 'Loading',
  props: {
    text: {
      type: String,
      default: 'Loading...'
    }
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    show() {
      this.show = true
    },
    hide() {
      this.show = false
    }
  }
}

在这个脚本中，我们定义了一个名为 Loading 的组件，它具有一个名为 text 的 prop，用于设置加载提示信息。此外，我们还定义了 show 和 hide 两个方法，分别用于显示和隐藏加载组件。

CSS 文件

最后，我们来看看组件的 CSS 文件。

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
  animation: loading 1s infinite linear;
}

@keyframes loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.loading-text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
}

在这个样式表中，我们定义了加载组件的样式。我们使用 position: fixed 将组件固定在页面顶部，并使用 background-color 设置组件的背景颜色。我们还使用 animation 属性为加载图标添加了一个旋转动画。

使用组件

现在，我们已经完成了加载组件的开发。接下来，我们就可以在 Vue 应用程序中使用它了。

<template>
  <div>
    <button @click="showLoading">Show Loading</button>
    <button @click="hideLoading">Hide Loading</button>

    <loading v-if="show" :text="loadingText"></loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      loadingText: 'Loading...'
    }
  },
  methods: {
    showLoading() {
      this.show = true
    },
    hideLoading() {
      this.show = false
    }
  }
}
</script>