vue2项目使用Loading 组件

在 Vue 2 项目中使用 Loading 组件可以通过以下步骤实现：

1. 首先，你需要创建一个名为 Loading 的组件。可以在你的项目中创建一个新的 .vue 文件来定义这个组件。这个组件可以包含一个加载动画或者其他你想要展示的内容。

2. 在你的组件中，你可以使用 Vue 的数据绑定来控制 Loading 组件的显示与隐藏。可以在组件的 data 中添加一个布尔类型的变量，比如 `isLoading`，默认值为 `false`。

3. 在需要显示 Loading 组件的地方，可以使用 `v-if` 指令来判断 `isLoading` 是否为 `true`，如果是则显示 Loading 组件。例如：

<template>
  <div>
    <button @click="showLoading">显示Loading</button>
    <loading v-if="isLoading"></loading>
  </div>
</template>

4. 在组件的方法中，你可以定义一个函数来改变 `isLoading` 的值，从而控制 Loading 组件的显示与隐藏。例如：

<script>
import Loading from './Loading.vue';

export default {
  components: {
    Loading,
  },
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    showLoading() {
      this.isLoading = true;
      // 模拟异步操作
      setTimeout(() => {
        this.isLoading = false;
      }, 3000);
    },
  },
};
</script>

在上面的示例中，点击按钮会调用 `showLoading` 方法，在方法中将 `isLoading` 设置为 `true`，然后通过 `setTimeout` 模拟一个异步操作，3 秒后将 `isLoading` 设置为 `false`，从而隐藏 Loading 组件。

这样就可以在你的 Vue 2 项目中使用 Loading 组件了。当需要展示加载状态时，通过改变 `isLoading` 的值来显示 Loading 组件，加载完成后再将其隐藏。