vue3.0 + element Plus点击按钮发送请求，添加loading加载状态

在Vue 3.0中，你可以使用element-plus库中的ElButton组件来创建按钮，并利用Vue的ref属性和loading属性来控制按钮的加载状态。以下是一个简单的示例：

<template>
  <el-button
    :loading="isLoading"
    @click="sendRequest"
  >
    发送请求
  </el-button>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
 
const isLoading = ref(false);
 
async function sendRequest() {
  isLoading.value = true;
  try {
    // 这里发送你的请求
    // const response = await yourApiCall();
    // 处理响应
    ElMessageBox.alert('请求成功！', '成功', { type: 'success' });
  } catch (error) {
    // 处理错误
    ElMessageBox.alert('请求失败！', '错误', { type: 'error' });
  } finally {
    isLoading.value = false;
  }
}
</script>

在这个例子中，我们定义了一个名为isLoading的响应式引用，它被绑定到按钮的loading属性上。当按钮被点击时，会触发sendRequest函数。这个函数将isLoading设置为true来启用加载状态，然后发送请求。请求完成后，无论成功还是失败，都会通过ElMessageBox.alert显示一个对话框来告知用户结果，并在最后将isLoading设置回false来关闭加载状态。