vue3加el-loading写法

在Vue3中，利用Element UI库的`<el-loading>`组件实现加载提示是很常见的。下面是一个基本的使用示例：

首先，你需要安装Element UI库，可以使用npm或yarn来安装：

npm install element-ui
# 或者
yarn add element-ui

然后，在你的组件模板中引入并使用`<el-loading>`：

<template>
  <div>
    <!-- 当数据还未加载时显示加载提示 -->
    <v-loading :fullscreen="isLoading" :text="loadingText">
      <!-- 其他内容，如列表、表格等 -->
      <div v-if="!isLoading">
        <ul>
          <li v-for="(item, index) in items" :key="index">{{ item }}</li>
        </ul>
      </div>
    </v-loading>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElLoading } from 'element-plus';

const isLoading = ref(false);
const loadingText = "数据正在加载...";

// 假设有一个async的函数fetchData()用于获取数据
const fetchData = async () => {
  isLoading.value = true;
  try {
    // 这里替换为实际的数据请求
    const data = await fetch('your-api-url');
    // 更新数据后关闭加载提示
    isLoading.value = false;
    items = data; // 将数据赋值给items
  } catch (error) {
    console.error(error);
    isLoading.value = false; // 如果有错误，也关闭加载提示
  }
};

onMounted(() => {
  fetchData();
});
</script>

在这个例子中，我们创建了一个`isLoading`的ref来控制加载提示是否显示，当`fetchData`异步操作正在进行时设置`isLoading`为`true`，加载完成或出错后设置回`false`。