美文网首页
vue2.0实现一个等待加载的动画效果

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

作者: 祈澈菇凉 | 来源:发表于2023-09-26 09:44 被阅读0次

    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>标签。

    相关文章

      网友评论

          本文标题:vue2.0实现一个等待加载的动画效果

          本文链接:https://www.haomeiwen.com/subject/teafbdtx.html