vue loading

// Vue 3 示例代码：使用 loading 组件

<template>
  <div>
    <button @click="toggleLoading">Toggle Loading</button>
    <div v-if="isLoading" class="loading-overlay">
      <p>Loading...</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    toggleLoading() {
      this.isLoading = !this.isLoading;
    },
  },
};
</script>

<style scoped>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
</style>

解释说明：

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

   • 包含一个按钮，点击时会触发 toggleLoading 方法。
   • 使用 v-if 指令来控制 loading-overlay 的显示和隐藏，当 isLoading 为 true 时显示。

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

   • 定义了一个 data 函数，返回一个包含 isLoading 属性的对象，初始值为 false。
   • 定义了一个 methods 对象，包含 toggleLoading 方法，用于切换 isLoading 的布尔值。

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

   • 定义了 .loading-overlay 类的样式，使其覆盖整个页面，并居中显示加载文本。
   • 使用 rgba 设置背景颜色为半透明黑色，使加载层看起来更美观。