【vue】v-自定义指令

前言

在 Vue.js 中，v - 自定义指令 是一种强大的功能，允许开发者扩展 HTML 元素的行为，封装可复用的 DOM 操作逻辑。它类似于内置指令（如 v-model、v-show），但可以根据业务需求自定义功能。

自定义指令的基本概念

自定义指令主要用于操作 DOM 元素，比如：

自动聚焦输入框
格式化日期显示
限制输入内容
实现拖拽、滚动监听等交互它适用于需要直接操作 DOM 的场景，当组件化方案（如 props、事件）不足以满足需求时，自定义指令是更合适的选择。

自定义指令的使用方式

Vue 提供了两种注册方式：全局注册 和局部注册。

el和binding

在 Vue 自定义指令中，el 和 binding 是两个重要的参数：

1、el含义：指令所绑定的 DOM 元素本身

makefile 复制代码

javascript
el: HTMLElement

2、 binding 参数

typescript 复制代码

javascript
binding: {
  value: any,        // 传递给指令的值
  oldValue: any,     // 之前的值（仅在 updated 钩子中可用）
  arg: string,       // 传递给指令的参数
  modifiers: Object,  // 修饰符对象
  instance: Object,  // Vue 组件实例
  dir: Object        // 指令定义对象
}

3、案例

全局注册

通过 Vue.directive() 方法注册，可在整个应用中使用：

main.js 复制代码

// 自定义指令
Vue.directive('demo', { 
    mounted(el, binding) {
        console.log('=== el 是什么 ===')
        console.log('el:', el) 
        // 实际的 DOM 元素
        console.log('el.tagName:', el.tagName) 
        // 元素标签名 
        console.log('=== binding 是什么 ===') 
        console.log('binding:', binding)
        console.log('binding.value:', binding.value) 
        // '红色' 或 '蓝色'
        console.log('binding.arg:', binding.arg)
        // 'click'
        console.log('binding.modifiers:', binding.modifiers)
        // { modifier1: true, modifier2: true } 
        // 实际应用：根据传入的值改变文字颜色
        if (binding.value === '红色') { 
            el.style.color = 'red'
        } else if (binding.value === '蓝色') { 
            el.style.color = 'blue'
        }
    }
})

在模板中使用

html 复制代码

<!-- 父组件 --> 
<template> 
    <div> 
        <!-- 指令使用 -->
        <p v-demo="'红色'">这段文字会变成红色</p>
        <p v-demo="'蓝色'">这段文字会变成蓝色</p>
        <button v-demo:click.modifier1.modifier2="handleClick"> 点击按钮 </button>
    </div> 
</template>
<script setup>
const handleClick = () => { 
    console.log('按钮被点击了')
} 
</script
<input v-focus>

局部注册

在组件的 directives 选项中注册，仅在当前组件生效：

js 复制代码

export default {
    directives: { 
        // 注册局部指令 v-color 
        color: { 
            bind: function (el, binding) { 
                // 设置元素颜色为指令参数
                el.style.color = binding.value
            }
        } 
    } 
}

html 复制代码

<p v-color="'red'">这段文字是红色的</p>