Vue3 加载中。。。 Loading 组件封装 (可以根据自己需求修改该组件)

最新推荐文章于 2024-05-13 15:55:02 发布

一口一个人.

最新推荐文章于 2024-05-13 15:55:02 发布

阅读量143

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/lele66688888/article/details/132596455

版权

本文介绍了如何在Vue应用中创建一个简单的动画加载组件，用于显示数据加载状态，用户可以自定义样式以满足不同需求，使用CSS3动画实现转圈效果。

摘要由CSDN通过智能技术生成

<template>
  <div class="container">
    <div class="tip" v-if="page > total && tipFlag">没有更多数据了</div>
    <div class="loading-box" v-if="loadingFlag && page <= total">
      <div class="loading"></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
  page: Number, //接受页数
  total: Number, //接收总页数
  loadingFlag: Boolean, //是否正在加载数据
  tipFlag: Boolean, //是否显示 "没有更多数据的提示"
});
</script>
<style lang="scss">
.container {
  .tip {
    color: #858a99;
    font-size: 14px;
    text-align: center;
    margin: 5px;
  }
  .loading-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;

    .loading {
      width: 30px;
      height: 30px;
      border: 2px solid #858a99;
      border-top-color: transparent;
      border-radius: 100%;
      text-align: center;

      animation: circle infinite 0.75s linear;
    }

    // 转转转动画
    @keyframes circle {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
}
</style>

简单的一个动画组件加载类似转圈可以根据自己的需求来写