ElLoading实现按钮防重复点击

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

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

以服务的方式调用Loading：

import { ElLoading } from 'element-plus'

2。定义一个基础配置：

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

3。传入一个方法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(...ar