目录
背景
目标
核心代码
样式定义：让图标居中、响应父级颜色
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。该指令具有以下优点：
- 🧩 模块化结构清晰；
- 🎨 样式可定制；
- ⚙️ 支持异步操作；
- 🔄 可恢复原始图标；
- 🐞 易于调试和扩展。
