如何用Vue3 Element Plus实现防重复点击按钮的封装？

Vue3 Element Plus实现防重复点击按钮的封装

说实话， 做前端开发的兄弟们，谁没遇到过这种让人头秃的场景？产品经理跑过来说：“用户反馈说网络卡顿的时候多点了几下提交， 后来啊后台多了好几条重复数据，你赶紧修一下。” 或者更惨的是支付接口被重复调用了这可是要出大事故的。这种时候，你心里肯定在嘀咕：“就不嫩老实点只点一次吗？”，他急了。

问题背景

在实际的 Web 应用开发中， 我们经常会遇到以下问题：用户快速多次点击提交按钮，导致重复提交表单，产生多条相同数据；异步请求未完成时 点击按钮，导致重复请求，不忍直视。。

为了解决这个问题， 我们可以封装一个防重复点击的按钮组件，利用 Vue3 的 Comp 一句话。 osition API 和 Element Plus 的 Loading 服务来实现。

封装思路

我们的目标是创建一个 LockButton 组件， 它能够自动实现防重复点击，在异步施行期间锁定按钮，避免重复请求或提交。