Element-UI 下载按钮

### Element-UI 下载按钮的实现

Element UI 提供了多种方式来创建具有不同功能的按钮，其中包括可以用于触发文件下载行为的按钮。为了实现在点击按钮时执行特定逻辑并显示加载状态的效果，通常会结合 `el-button` 组件和其他属性一起使用。

对于想要实现带有加载效果的下载按钮场景，可以通过设置 `loading` 属性为 true 来展示加载图标，并通过事件处理函数控制该属性的状态变化[^1]。

下面是一个简单的例子展示了如何利用 Vue 和 Element UI 创建一个带加载动画的下载按钮：

<template>
  <div>
    <!-- 定义一个 el-button -->
    <el-button :loading="downloadLoading" @click="handleDownload">下载</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      downloadLoading: false, // 控制 loading 状态
    };
  },
  methods: {
    handleDownload() {
      this.downloadLoading = true; // 开始加载
      
      setTimeout(() => { // 模拟异步请求过程
        const link = document.createElement('a');
        link.href = 'https://example.com/sample.pdf'; // 文件链接地址
        link.download = 'sample.pdf';
        link.click();
        
        this.downloadLoading = false; // 请求完成关闭加载
        
        this.$message({
          message: '下载成功',
          type: 'success'
        });
      }, 2000); // 延迟两秒模拟网络延迟
    }
  }
};
</script>

在这个案例里，当用户点击 "下载" 按钮时，页面上的按钮将会切换到加载模式；与此同时，后台发起一次假定的异步调用来获取资源，在这里用到了 JavaScript 的原生 API (`setTimeout`) 来模仿实际的数据传输时间。一旦数据准备就绪，则自动触发浏览器默认的行为去保存远程服务器上指定路径下的 PDF 文档至本地磁盘中，并结束加载提示。