vue3项目 setup 增加一个loadding动画 代码怎么写 当接口正在返回开启动画 状态是true 当接口返回200 动画消失 状态是false 调用element-ui组件库的东西 代码怎么写

你可以按照以下步骤在Vue 3项目中添加一个loading动画，并使用Element-UI组件库：

1. 首先，在你的组件中，使用`ref`来创建一个响应式的变量来表示loading状态：

import { ref } from 'vue';

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

    // 其他代码...

    return {
      isLoading,
    };
  },
};

2. 在接口请求前，将loading状态设置为`true`，表示正在加载：

import { ref } from 'vue';
import { Loading } from 'element-ui';

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

    // 其他代码...

    const fetchData = () => {
      isLoading.value = true;

      // 发起接口请求...

      // 当接口返回200时，将loading状态设置为false
      // 这个示例中使用setTimeout来模拟接口请求的异步操作
      setTimeout(() => {
        isLoading.value = false;
      }, 2000);
    };

    return {
      isLoading,
      fetchData,
    };
  },
};

3. 在模板中使用`isLoading`状态来控制loading动画的显示与隐藏：

<template>
  <div>
    <!-- 其他内容... -->

    <el-button @click="fetchData">发起请求</el-button>

    <el-loading :visible="isLoading.value" text="加载中...">
      <!-- loading时显示的内容 -->
      <!-- 可以根据需要自定义loading动画的样式 -->
    </el-loading>
  </div>
</template>

请确保已经正确引入了Element-UI组件库，并且按照它的文档进行了配置和注册。以上代码是一个简单示例，你可以根据自己的需要进行修改和扩展。