vue中使用loading

在Vue.js中，使用loading通常是为了在数据加载或者异步操作期间给用户显示一个占位反馈，让用户知道系统正在处理请求。Vue提供了一种灵活的方式来集成这种用户体验元素：

1. **组件级Loading**：在需要等待数据的地方添加一个独立的`<loading>`或`<v-loading>`组件。例如，当调用API获取数据时，可以设置一个计算属性来控制这个加载状态：

<template>
  <button @click="fetchData">点击加载</button>
  <v-loading v-if="isLoading" />
  <div v-show="!isLoading">
    <!-- 数据将在这里渲染 -->
    <ul v-for="item in items">{{ item.name }}</ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      items: [],
    };
  },
  methods: {
    fetchData() {
      this.isLoading = true;
      // 异步请求数据
      axios.get('api/data').then((response) => {
        this.items = response.data;
        this.isLoading = false;
      });
    },
  },
};
</script>

2. **全局Loading**: 如果你需要在整个应用中统一展示loading效果，可以考虑创建一个自定义指令或者混入（mixins）：

// loading.vue
<template>
  <div class="loading-overlay" v-if="$vnode.context.loading" />
</template>
<script>
export default {
  inherit: true,
  props: ['loading'],
};
</script>

然后在父组件中使用这个loading组件：

<template>
  <loading :loading="isLoading" />
  <!-- 其他内容 -->
</template>
<script>
import Loading from './loading.vue';

export default {
  components: {
    Loading,
  },
  data() {
    return { isLoading: false };
  },
  // ...
};
</script>