ElLoading实现按钮防重复点击

最新推荐文章于 2023-12-29 16:30:00 发布

原创最新推荐文章于 2023-12-29 16:30:00 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用ElementPlus的Loading组件防止按钮重复点击的方法。通过包装函数的方式，在按钮点击事件中加入加载效果，并确保无论同步还是异步操作，加载状态都能正确显示与关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单记录一下在项目中【使用loading实现按钮防重复点击】的方法。

Element Plus 提供了两种调用 Loading 的方法：指令和服务。

以服务的方式调用Loading：

import { ElLoading } from 'element-plus'

定义一个基础配置

const defaultOptions = {
  lock: true,
  text: '正在加载',
  background: 'rgba(0, 0, 0, 0.1)'
}

传入一个方法fn,在它执行周期内,加上全屏loading

如果：

1. fn是同步方法，结束后隐藏loading

2. 如果是异步方法，resolve后隐藏loading

3. 报错后隐藏loading并抛出错误

export const byLoading = (fn, options = {}) => {
  let loading
  const showLoading = (options) => {
    loading = ElLoading.service(options)
  }

  const hideLoading = () => {
    if (loading) {
      loading.close()
    }
  }
  const _options = Object.assign(defaultOptions, options)
  const newFn = (...args) => {
    try {
      showLoading(_options)
      const result = fn(...args)
      const isPromise = result instanceof Promise
      if (!isPromise) {
        hideLoading()
        return result
      }
      return result
        .then((res) => {
          hideLoading()
          return res
        })
        .catch((err) => {
          hideLoading()
          throw err
        })
    } catch (err) {
      hideLoading()
      throw err
    }
  }
  return newFn
}

使用的时候，import { byLoading }，在按钮点击事件调用接口的函数外包裹一层byLoading即可

例：const data = await byLoading(getDefine)(row.id)