ElLoading实现按钮防重复点击

最新推荐文章于 2025-03-11 12:00:14 发布

Orange_lt

最新推荐文章于 2025-03-11 12:00:14 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Orange_lt/article/details/125042494

版权

这篇博客介绍了如何在Vue.js项目中利用Element Plus的Loading服务防止按钮重复点击。通过定义基础配置，并根据同步或异步方法的状态来控制Loading的显示和隐藏，实现了在调用接口时的防重复点击功能。

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

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