vue3 loading

// Vue 3 Loading 示例代码

<template>
  <div v-if="isLoading" class="loading">Loading...</div>
  <div v-else>
    <!-- 这里可以放置你想要显示的内容 -->
    Content Loaded!
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const isLoading = ref(true);

    // 模拟加载数据的过程
    onMounted(() => {
      setTimeout(() => {
        isLoading.value = false;
      }, 2000); // 2秒后停止加载
    });

    return {
      isLoading,
    };
  },
};
</script>

<style scoped>
.loading {
  font-size: 24px;
  color: #ccc;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用 v-if 和 v-else 来控制显示加载状态或内容。
   • 当 isLoading 为 true 时，显示 "Loading..." 的提示信息；否则显示实际内容。

2. 脚本部分 (<script>):

   • 使用 ref 创建一个响应式的变量 isLoading，初始值为 true。
   • 使用 onMounted 钩子函数模拟数据加载过程，2秒后将 isLoading 设置为 false，表示加载完成。

3. 样式部分 (<style scoped>):

   • 简单设置了加载提示文字的样式，字体大小为 24px，颜色为灰色 (#ccc)。