本文探讨了在Vue3项目中，如何通过自定义指令解决按钮重复提交的问题。文章首先分析了前端开发中常见的按钮重复点击导致数据重复提交的问题，介绍了防抖和Loading两种解决方案，并指出了它们各自的局限性。随后，作者提出了一种更优雅的解决方案——封装Vue3自定义指令，实现按钮点击时添加Loading效果，并在请求完成后自动移除，从而避免了重复提交，提高了代码复用性和可维护性。

💡 按钮重复提交问题：在前端开发中，用户快速点击按钮可能导致多次请求，造成数据重复提交，给后端带来不必要的压力。

🛡️ 防抖方案的局限性：虽然防抖可以限制按钮点击频率，但当接口响应时间超过防抖时间时，仍可能出现重复提交的问题。

⏳ Loading方案的改进：通过在按钮点击时添加Loading状态，并在请求完成后移除，可以有效防止用户重复点击，确保数据提交的准确性。

🛠️ 自定义指令的封装：将Loading的逻辑封装成Vue3自定义指令，可以在多个组件中复用，简化代码，提高开发效率和代码可维护性。

⚙️ 指令的使用方法：通过在按钮上绑定自定义指令，并传入一个回调函数，即可实现点击按钮时添加Loading效果，并在回调函数中处理异步请求，请求完成后清除Loading状态。

阳火锅 2025-05-21 18:53 重庆

前言

在日常开发中会涉及到各种按钮请求，测试人员经常怼着一个按钮狂点不止。这样导致很多数据重复提交！

「前端人员经常怼着测试说」：你能不能不要点那么快啊！

（由于有时候接口返回比较慢）

「测试回怼」：我不知道点击有没有成功呀！所以多点几次咯~

「项目经理」：这是个 BUG，你们前后端开发商量一下看怎么修复吧！

「后端人员」：这不是我的问题，请求慢我没办法。。前端发生的事，找前端吧！

防抖

那既然这么喜欢围着按钮狂点，那就加防抖呗！

   //伪代码
    <el-button @click='handleSubmit'>有本事再狂点击</el-button>
    //省略...debounce的实现
    const handleSubmit = debounce(submit,1000)

加防抖看似解决了问题了。。没想到过了几天！测试又在提 BUG...

「测试」: 兄弟，我咋还是重复提交了 2 条数据啊！

「前端」：你又搞了什么骚操作？点了几下啊！

「测试」：跟上次一样啊，我作死的在点。。

「前端」：把游览器 F12 打开，我过来看一下吧！哎~

经过两人抓头排查，问题出现了：由于防抖函数设置的时间是 1 秒，后端接口返回的时间是 5 秒。。测试兄弟在这 5 秒内狂点了 100 多下。。（真是 5 秒真男人啊）

还是加按钮 Loading 吧

最后没办法了，只能通过请求之前给按钮加一个 loading 禁用状态，等接口返回 200 再清除 loading 了！

    //伪代码
    <el-button @click='handleSubmit' :loading='loading'>有本事再狂点击</el-button>
    let loading = false
    function handleSubmit(){
      loading = true //开启loading
      ajax('xxx/xxx/xxx').then(res=>{
           if(res.code == 200){
            loading = false //关闭loading
           }
      })
    }

这下就完美解决了测试兄弟的 BUG！可是又面临一个开发问题，就是如果很多地方要用到提交，是不是每个页面都去写一个 loading 变量啊！

接下来就是重头戏了，咱们把它封装成一个 vue 指令吧！

指令封装（vue3）

//入口文件main.js
import { createApp } from 'vue'
import App from './App.vue'
import { bLoading } from './permission/loading'
const app = createApp(App)
bLoading(app) //全局注册

//bLoading.js
import type { App } from 'vue'
let tag = null 
const className = `  //loading图标的样式
    el-icon {
      --color: inherit;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      height: 1em;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      line-height: 1em;
      position: relative;
      width: 1em;
      fill: currentColor;
      color: var(--color);
      font-size: inherit;
    }
`
//loading图标，可以去阿里图库上面复制一个svg
const i = `<i class=${className} id='loading'> 
    <svg t="1745215287730" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2663" width="200" height="200"><path d="M834.7648 736.3584a5.632 5.632 0 1 0 11.264 0 5.632 5.632 0 0 0-11.264 0z m-124.16 128.1024a11.1616 11.1616 0 1 0 22.3744 0 11.1616 11.1616 0 0 0-22.3744 0z m-167.3216 65.8944a16.7936 16.7936 0 1 0 33.6384 0 16.7936 16.7936 0 0 0-33.6384 0zM363.1616 921.6a22.3744 22.3744 0 1 0 44.7488 0 22.3744 22.3744 0 0 0-44.7488 0z m-159.744-82.0224a28.0064 28.0064 0 1 0 55.9616 0 28.0064 28.0064 0 0 0-56.0128 0zM92.672 700.16a33.6384 33.6384 0 1 0 67.2256 0 33.6384 33.6384 0 0 0-67.2256 0zM51.2 528.9984a39.168 39.168 0 1 0 78.336 0 39.168 39.168 0 0 0-78.336 0z m34.1504-170.0864a44.8 44.8 0 1 0 89.6 0 44.8 44.8 0 0 0-89.6 0zM187.904 221.7984a50.432 50.432 0 1 0 100.864 0 50.432 50.432 0 0 0-100.864 0zM338.432 143.36a55.9616 55.9616 0 1 0 111.9232 0 55.9616 55.9616 0 0 0-111.9744 0z m169.0112-4.9152a61.5936 61.5936 0 1 0 123.2384 0 61.5936 61.5936 0 0 0-123.2384 0z m154.7776 69.632a67.1744 67.1744 0 1 0 134.3488 0 67.1744 67.1744 0 0 0-134.3488 0z m110.0288 130.816a72.8064 72.8064 0 1 0 145.5616 0 72.8064 72.8064 0 0 0-145.5616 0z m43.7248 169.472a78.3872 78.3872 0 1 0 156.8256 0 78.3872 78.3872 0 0 0-156.8256 0z" fill="" p-id="2664"></path></svg>
    </i>`
//核心代码
export function bLoading(app: App<Element>) {
  app.directive('bLoading', (el, binding) => {
    if (typeof binding.value !== 'function') {
      throw new Error('Directive value must be a function')
    }
    el.addEventListener('click', () => {
      addNode(el) //添加loading图标
      setTimeout(() =>{
          //执行异步函数
          binding.value(() => { 
              cleanNode(el) //清除loading
          })
      }) //延迟执行异步函数
    })
  })
}
//新增loading图标
function addNode(el) {
  if (el.firstElementChild.tagName === 'I') { //如果按钮上面自带图标，就先移除
    tag = el.firstElementChild;
    el.removeChild(el.firstElementChild)
    el.insertAdjacentHTML('afterbegin', i)
  } else {
    el.insertAdjacentHTML('afterbegin', i)
  }
  el.setAttribute('disabled', true)
  rotate('loading')
}
//清除loading图标
function cleanNode(el) {
  el.removeAttribute('disabled')
  if (el.firstElementChild) {
    el.removeChild(el.firstElementChild);
    if (tag) {
      el.prepend(tag)
    }
  }
}
//图标旋转动画
function rotate(id) {
  const element = document.getElementById(id);
  let angle = 0; // 初始角度为0度
  const speed = 2; // 旋转速度，单位为度/帧（例如，每帧旋转2度）
  function rotate() {
    angle = (angle + speed) % 360; // 确保角度在0到360之间循环
    element.style.transform = `rotate(${angle}deg)`; // 应用旋转变换
    requestAnimationFrame(rotate); // 请求下一帧的动画回调
  }
  rotate(); // 开始动画循环
}

页面使用

<el-button type="primary" v-bLoading="(next) => handleSubmit(next)" :icon="Plus">有本事再狂点击</el-button>
import { Plus } from '@element-plus/icons-vue'
function handleSubmit(next){
    //模拟异步请求
    setTimeout(()=>{
        //请求返回200
        next() //执行next函数，清除loading状态即可！
    },3000)
}

效果

总结

通过指令的形式，解决了重复提交的问题，遏止了代码臃于，方便复用！怎么样兄弟们，如果觉得这篇文章对你有帮助，就点赞收藏吧！

点击关注公众号，“技术干货” 及时达！

阅读原文

跳转微信打开