vue中点导出数据按钮，按钮一直转圈

在 Vue.js 中，当用户点击导出数据的按钮时，按钮会显示加载状态（通常是一个旋转的圆圈图标），这是为了向用户表示操作正在进行中。这通常通过以下步骤实现：

1. 绑定事件监听器：首先，你需要在按钮组件上绑定一个 click 事件处理器，例如：

   <button @click="exportData">导出数据</button>

2. 内部方法处理：在对应的 JavaScript 模块（如 methods 或者 computed）中，编写一个名为 `exportData` 的方法，开始处理数据导出操作：

   methods: {
     exportData() {
       this.$emit('download-data', /* 数据内容 */);
       // 或者异步操作，使用 loading 状态
       this.loading = true; // 设置 loading 属性为 true
       // 异步操作...
       setTimeout(() => {
         this.loading = false; // 导出完成，设置 loading 为 false
       }, 2000); // 模拟导出时间，实际操作需要替换为你的真实导出逻辑
     }
   },
   data() {
     return {
       loading: false, // 初始化一个 loading 的布尔变量
     };
   }

3. 动画效果：为了让用户看到明显的操作过程，你可以更新界面来显示加载动画，比如使用 CSS3 动画、轮播图或第三方库（如 Vue-loading）。

4. 下载功能：`$emit('download-data', data)` 发出自定义事件，接收者（可能是全局或父组件）可以根据这个事件下载文件。注意，这通常涉及到生成 CSV、Excel 或 JSON 文件并提供给浏览器下载。

如果你想要在操作完成后再停止按钮的旋转，记得在异步操作完成后关闭加载状态。如果按钮持续转圈，检查是否有阻塞操作或无限循环导致的。