Element-plus 加载状态按钮使用

业务需求：

为了好的用户体验, 当用户点击按钮请求的时候,给一个加载的效果, 这样用户就知道接口在请求了, 同时可以操作页面其他部分.
示例: 当点击下载的时候, 按钮请求接口, 文案变成下载中, 接口返回后, 文案变回下载.

<script setup lang="ts>
import { ref } from 'vue'
import { fetchApi } from '@/api'
// 定义一个变量 默认不加载
const isStartLoading = ref<boolean>(false)

const handleDownload = () => {
  isStartLoading.value = true
  // 调用请求方法
  fetchAPI().then(res => {
    // 请求完成不加载
    isStartLoading.value = false
  })
}

</script>
<template>
   <el-button
        @click="handleDownload"
        type="primary"
        plain
        :loading="isStartLoading"
        >{{ isStartLoading ? '下载中' : '下载' }}
   </el-button>
 </template>