当前位置：首页 > news >正文

封装和使用自定义指令

news 2025/7/26 20:34:54

在 Vue 中封装自定义指令是增强 DOM 操作能力的有效方式，下面通过几个典型场景展示如何封装和使用自定义指令。

基础自定义指令封装

示例 1：自动聚焦指令

// directives/focus.js
export const focus = {mounted(el) {el.focus() // 元素挂载后自动聚焦}
}// 在组件中使用
<template><input v-focus />
</template><script>
import { focus } from '@/directives/focus'export default {directives: { focus }
}
</script>

示例 2：权限控制指令

// directives/permission.js
export const permission = {mounted(el, binding) {const { value } = bindingconst userRoles = ['admin'] // 假设从 store 获取用户角色if (!userRoles.includes(value)) {el.parentNode && el.parentNode.removeChild(el) // 无权限则移除元素}}
}// 在组件中使用
<template><button v-permission="'admin'">管理按钮</button>
</template>

带参数和修饰符的指令

示例 3：防抖指令

// directives/debounce.js
export const debounce = {mounted(el, binding) {const { value, arg = 'click', modifiers } = bindingconst delay = modifiers.large ? 1000 : 300let timer = nullel.addEventListener(arg, () => {clearTimeout(timer)timer = setTimeout(() => value(), delay)})}
}// 在组件中使用
<template><button v-debounce.large="submit">防抖提交</button>
</template>

全局注册自定义指令

示例 4：在入口文件中全局注册

// main.js
import { createApp } from 'vue'
import App from './App.vue'// 批量导入指令
import * as directives from './directives'const app = createApp(App)// 全局注册所有指令
Object.keys(directives).forEach(key => {app.directive(key, directives[key])
})app.mount('#app')

高级用法：动态指令参数

示例 5：图片懒加载指令

// directives/lazy.js
export const 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) // 开始观察元素}
}// 在组件中使用
<template><img v-lazy="imageUrl" alt="懒加载图片" />
</template>

生命周期钩子

自定义指令有以下生命周期钩子：

beforeMount：指令第一次绑定到元素且在挂载父组件之前调用
mounted：元素已插入父 DOM 后调用
beforeUpdate：组件更新前调用
updated：组件更新后调用
beforeUnmount：元素卸载前调用
unmounted：元素卸载后调用

指令参数解构

在钩子函数中可以解构参数：

mounted(el, { value, arg, modifiers }) {// value: v-my-directive="xxx" 中的 xxx// arg: v-my-directive:xxx 中的 xxx// modifiers: v-my-directive.xxx 中的 xxx
}