由于接口会出现请求时间长的情况，与产品讨论了两个方案：

• 方案一（GitHub - axios）：
  • 使用 axios 的 AbortController 或者 CancelToken （不推荐，该 API 在 v0.22.0 起弃用），且 AbortController 的 abort() 需要服务器配合接收进行接口取消处理。
• 方案二：
  • 在接口请求完成前，弹框不能被关闭，关闭按钮不能点击，并且鼠标移动时，鼠标样式为 不能点击样式 。

经过讨论以及后端小伙伴没时间，采取方案二。

cursor

cursor - CSS：层叠样式表 | MDN (mozilla.org)

• not-allowed：表示不能执行
• default：表示默认指针，通常是箭头
• pointer：表示悬浮于连接上时，通常为手

pointer-events

pointer-events - CSS：层叠样式表 | MDN (mozilla.org)

• auto：与 pointer-events 属性未指定时的表现效果相同
• none：元素永远不会成为鼠标事件的 target (en-US) 。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素。

如果元素同时使用 cursor: not-allowed 和 pointer-events: none ，鼠标为默认样式。

• 如果一定要鼠标禁用事件且为不能执行样式，使用盒子套盒子的方法
  • 内部盒子使用 pointer-events: none ，阻止鼠标事件
  • 外部盒子使用 cursor: not-allowed ，实现鼠标不能执行样式