vue2.0实现一个等待加载的动画效果

王小婷

发布于 2023-09-28 09:28:49

7440

发布于 2023-09-28 09:28:49

1：创建一个Vue组件：在Vue项目中创建一个等待加载动画的组件。可以使用命令行工具或手动创建一个.vue文件，命名为Loading.vue

2：编写组件模板：在Loading.vue文件中，编写组件的模板。这个模板定义了等待加载动画的结构和样式。

<template>
  <div class="loading-container">
    <!-- 等待加载动画的内容 -->
  </div>
</template>

3：添加样式：在组件的<style>部分，添加CSS样式来定义加载动画的外观和动画效果。

<style>
.loading-container {
  /* 等待加载容器的样式 */
}
</style>

4：添加动画效果：在CSS样式中，使用@keyframes规则定义加载动画的动画效果。

<style>
@keyframes spin {
  /* 定义加载动画的动画效果 */
}
</style>

5：添加组件逻辑：在组件的<script>部分，可以添加一些组件的逻辑代码。例如，定义组件的属性和方法。

<script>
export default {
  name: 'Loading',
  /* 组件的属性和方法 */
};
</script>

6：在应用中使用组件：在需要显示等待加载动画的地方，使用<loading></loading>标签来引入并使用Loading组件。

<template>
  <div>
    <!-- 其他应用内容 -->
    <loading v-if="isLoading"></loading>
  </div>
</template>

使用了一个名为isLoading的变量来控制等待加载动画的显示和隐藏。可以根据实际需要使用适当的条件来显示加载动画。

以下是一个简单的示例demo

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

<script>
export default {
  data() {
    return {
      message: '加载中...', // 自定义加载中文本
    };
  },
};
</script>

<style>
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 10px;
  font-size: 16px;
}

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

在这个示例中，创建了一个名为 Loading 的Vue组件。组件包含一个加载容器（loading-container）和一个旋转的加载动画（loading-spinner），以及一个显示加载文本的元素（loading-text）。

通过CSS的@keyframes规则，定义了一个旋转动画，将其应用于加载动画元素。

要在应用中使用这个等待动画组件，可以在Vue实例中引入和注册该组件，然后在需要显示等待动画的地方使用<loading></loading>标签。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

命令行工具