博客

简单记录一下在项目中【使用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)