告别传统的防抖机制，提交按钮的新时代来临

Summer不秃

已于 2025-05-16 17:58:39 修改

阅读量617

点赞数 14

分类专栏： JavaScript Vue 文章标签： vue.js javascript 前端

于 2025-05-16 17:55:52 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/z001126/article/details/148012483

版权

JavaScript 同时被 2 个专栏收录

12 篇文章

订阅专栏

11 篇文章

订阅专栏

目录

样式定义：让图标居中、响应父级颜色

SVG 图标：轻量、无依赖的 loading 图标

指令注册：全局注册 v-bLoading

DOM 操作：添加与清除 loading 图标

1. 添加 loading 图标

2. 清除 loading 图标

动画控制：实现 loading 图标旋转

main.js里全局引入

背景

在现代 Web 开发中，用户体验（UX）是至关重要的。当用户点击一个提交按钮或执行某个异步操作时，如果没有明确的反馈机制，很容易造成重复点击、数据冲突等问题。

为了解决这个问题，我们常常会使用 loading 加载状态 来提示用户“正在处理”，并同时禁用按钮防止多次触发。Vue 提供了强大的自定义指令功能，我们可以借助它来封装一个通用的 v-bLoading 指令，实现优雅的加载交互体验。

本文将从背景出发，逐步分析如何通过 Vue 3 的自定义指令机制，结合 DOM 操作和动画控制，实现一个可复用的按钮 loading 功能。

目标

当按钮被点击时：
- 显示 loading 图标；
- 禁用按钮；
- 执行传入的异步函数；
异步操作完成后：
- 移除 loading 图标；
- 启用按钮；
- 如果原来有图标，恢复原图标。

核心代码

封装js文件，这里我们导入了 Vue 3 中的 App 和 DirectiveBinding 类型，用于类型检查和保证代码的健壮性。以下是代码模块讲解表格

模块	功能
样式部分	定义 loading 图标的样式
SVG 图标	使用内联 SVG 实现 loading 动画图标
核心逻辑	注册 `v-bLoading` 指令，绑定点击事件
DOM 操作	添加/移除 loading 图标，保存/恢复原有图标
动画控制	使用 `requestAnimationFrame` 实现旋转动画

样式定义：让图标居中、响应父级颜色

const className = `.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;
  width: 1em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1em;
  position: relative;
  fill: currentColor;
  color: var(--color);
  font-size: inherit;
}`

SVG 图标：轻量、无依赖的 loading 图标

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 数据省略 -->
    </svg>
  </i>
`

指令注册：全局注册 `v-bLoading`

export function bLoading(app: App<Element>) {
  app.directive('bLoading', {
    mounted(el: HTMLElement, binding: DirectiveBinding) {
      if (typeof binding.value !== 'function') {
        throw new Error('Directive value must be a function')
      }

      el.addEventListener('click', () => {
        addNode(el)
        setTimeout(() => {
          binding.value(() => {
            cleanNode(el)
          })
        }, 0)
      })
    }
  })
}

mounted 生命周期钩子用于绑定点击事件。
binding.value 必须是一个函数，该函数接收一个回调参数 done。
在点击按钮后，先添加 loading 图标，然后执行传入的异步函数。
函数执行完毕后调用 done 清除 loading。

DOM 操作：添加与清除 loading 图标

1. 添加 loading 图标

function addNode(el: HTMLElement): void {
  if (el.firstElementChild && el.firstElementChild.tagName === 'I') {
    tag = el.firstElementChild
    el.removeChild(el.firstElementChild)
  }

  el.insertAdjacentHTML('afterbegin', i)
  el.setAttribute('disabled', 'true')

  rotate('loading')
}

判断是否已有图标，有的话先保存起来；
插入新的 loading 图标；
设置按钮为禁用状态；
触发动画函数 rotate。

2. 清除 loading 图标

function cleanNode(el: HTMLElement): void {
  el.removeAttribute('disabled')

  if (el.firstElementChild?.id === 'loading') {
    el.removeChild(el.firstElementChild)
  }

  if (tag) {
    el.prepend(tag)
    tag = null
  }
}

移除禁用；
删除当前的 loading 图标；
如果之前有图标，则恢复回去。

动画控制：实现 loading 图标旋转

function rotate(id: string): void {
  const element = document.getElementById(id)
  if (!element) return

  let angle = 0
  const speed = 2 // 每帧旋转角度

  function animate() {
    angle = (angle + speed) % 360
    element.style.transform = `rotate(${angle}deg)`
    requestAnimationFrame(animate)
  }

  animate()
}

使用 requestAnimationFrame 实现平滑的旋转动画，避免卡顿或性能问题。

完整代码

import type { App, DirectiveBinding } from 'vue'

// 全局 loading 图标 SVG 字符串
const className = `.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;
  width: 1em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1em;
  position: relative;
  fill: currentColor;
  color: var(--color);
  font-size: inherit;
}`

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>
`

let tag: Element | null = null

/**
 * 注册一个全局自定义指令 v-bLoading
 * @param app Vue 应用实例
 */
export function bLoading(app: App<Element>) {
  app.directive('bLoading', {
    mounted(el: HTMLElement, binding: DirectiveBinding) {
      if (typeof binding.value !== 'function') {
        throw new Error('Directive value must be a function')
      }

      el.addEventListener('click', () => {
        addNode(el)
        setTimeout(() => {
          binding.value(() => {
            cleanNode(el)
          })
        }, 0)
      })
    }
  })
}

/**
 * 添加 loading 图标到按钮中
 * @param el 按钮元素
 */
function addNode(el: HTMLElement): void {
  if (el.firstElementChild && el.firstElementChild.tagName === 'I') {
    // 如果已经有图标，先保存旧图标
    tag = el.firstElementChild
    el.removeChild(el.firstElementChild)
  }

  el.insertAdjacentHTML('afterbegin', i)
  el.setAttribute('disabled', 'true')

  rotate('loading')
}

/**
 * 移除 loading 图标，并恢复原有图标（如果存在）
 * @param el 按钮元素
 */
function cleanNode(el: HTMLElement): void {
  el.removeAttribute('disabled')

  if (el.firstElementChild?.id === 'loading') {
    el.removeChild(el.firstElementChild)
  }

  if (tag) {
    el.prepend(tag)
    tag = null
  }
}

/**
 * 实现 loading 图标的旋转动画
 * @param id loading 图标元素的 ID
 */
function rotate(id: string): void {
  const element = document.getElementById(id)
  if (!element) return

  let angle = 0
  const speed = 2 // 每帧旋转角度

  function animate() {
    angle = (angle + speed) % 360
    element.style.transform = `rotate(${angle}deg)`
    requestAnimationFrame(animate)
  }

  animate()
}

main.js里全局引入

import { createApp } from 'vue'import App from './App.vue'

import { bLoading } from './utils/loading'
const app = createApp(App)
bLoading(app)

使用案例

<button type="primary" v-bLoading="(next) => handleSubmit(next)">疯狂点击</button>

function handleSubmit(next){ 
    setTimeout(()=>{     
    next() 
},3000)}

结语

通过这篇文章，我们学习了如何使用 Vue 3 的自定义指令机制，结合 DOM 操作和动画控制，实现了一个实用的按钮 loading 指令 v-bLoading。该指令具有以下优点：

🧩 模块化结构清晰；
🎨 样式可定制；
⚙️ 支持异步操作；
🔄 可恢复原始图标；
🐞 易于调试和扩展。

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。