Vue3自定义指令实战：5个高效DOM操作技巧
核心价值： Vue3自定义指令提供了一种直接操作DOM的优雅方式。本文将展示5个实际开发中的高效应用场景，解决常见的DOM操作难题。
1. 基础指令：元素聚焦
实现自动聚焦功能：
// main.js
const app = createApp(App)
app.directive('focus', {
mounted(el) {
el.focus()
},
updated(el) {
el.focus()
}
})
// 组件中使用
<input v-focus type="text" />2. 权限控制指令
实现基于角色的元素显示控制：
app.directive('permission', {
beforeMount(el, binding) {
const { value } = binding
const roles = ['admin', 'editor'] // 从store获取实际角色
if (!roles.includes(value)) {
el.parentNode?.removeChild(el)
}
}
})
// 使用示例
<button v-permission="'admin'">删除</button>3. 图片懒加载指令
实现高性能图片加载：
app.directive('lazy', {
mounted(el, binding) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
el.src = binding.value
observer.unobserve(el)
}
})
})
observer.observe(el)
}
})
// 使用示例
<img v-lazy="'https://example.com/image.jpg'" alt="" />4. 拖拽指令
实现元素拖拽功能：
app.directive('drag', {
mounted(el) {
el.style.cursor = 'move'
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0
el.onmousedown = (e) => {
e.preventDefault()
pos3 = e.clientX
pos4 = e.clientY
document.onmouseup = closeDrag
document.onmousemove = elementDrag
}
function elementDrag(e) {
pos1 = pos3 - e.clientX
pos2 = pos4 - e.clientY
pos3 = e.clientX
pos4 = e.clientY
el.style.top = (el.offsetTop - pos2) + 'px'
el.style.left = (el.offsetLeft - pos1) + 'px'
}
function closeDrag() {
document.onmouseup = null
document.onmousemove = null
}
}
})| 指令类型 | 适用场景 | 生命周期 |
|---|---|---|
| 功能指令 | 聚焦、拖拽等 | mounted/updated |
| 权限指令 | 条件渲染 | beforeMount |
| 优化指令 | 懒加载等 | mounted/unmounted |
5. 防抖指令
实现事件防抖功能：
app.directive('debounce', {
mounted(el, binding) {
let timer
el.addEventListener('click', () => {
clearTimeout(timer)
timer = setTimeout(() => {
binding.value()
}, 500)
})
}
})
// 使用示例
<button v-debounce="handleClick">提交</button>合理使用自定义指令可以封装常见的DOM操作逻辑，使代码更加模块化和可复用，是Vue3高级开发的必备技能。
