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

vue2+vue3-自定义指令

news 2025/9/17 7:37:13

在vue中除了官方提供的指令还允许自定义指令。

Vue2

语法

全局注册指令

Vue.directive(指令名，{bind：function(el，blinding, vNode){// 指令第一次绑定到元素时调用- el: 被绑定元素- blinding: 指令相关信息- vNode.context: 当前实例化对象}inserted：function(el，blinding, vNode){// 被绑定元素插入父节点时调用}update：function(el，blinding, vNode, oldVnode){// 所在组件的VNode更新时调用}componentUpdated：function(el，blinding, vNode, oldVnode){// 所在组件的VNode及其子VNode全部更新后调用}unbind：function(el，blinding, vNode){// 指令与元素解绑时调用}
})

局部注册-通过directives配置项注册

directives：{指令名：{// 配置项与全局相同}
}

注意点：
[1] 指令名不带v-，vue创建指令时会自动加v- ，比如创建的指令为focus在trmplate中使用时使用v-focus

举例说明-input标签聚焦

<template><div><input v-focus></div>
</template>
<script>
export default {directives:{'focus':{inserted: function(el){el.focus()}}}
}
</script>

input标签在页面打开时会自动聚焦

举例说明- 高亮设置

默认显示黄色背景高亮也可以通过选择更改高亮颜色

<template><div><div><select name="" id="" v-model="color"><option :value="1">黄色</option><option :value="2">红色</option></select><span v-highlight>111111111</span></div></div>
</template>
<script>
export default {data:function(){return{color: 1}},directives:{highlight:{bind: function(el){el.style.backgroundColor = 'yellow'},update: function(el, blinding, vnode){console.log(vnode.context)el.style.backgroundColor = vnode.context.color == 1 ? 'yellow' : 'red'}}}
}
</script>

Vue3

语法

全局注册

app = Vue.createApp({})
app.directive(指令名，{created: function(){// 在绑定元素的属性或事件监听器被应用之前调用},beforeMount: function(el, binding, vnode, prevVnode){// beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用},mounted: function(el, binding, vnode, prevVnode){// mounted：在绑定元素的父组件被挂载后调用（相当于Vue2的inserted）},beforeUpdate: function(){// beforeUpdate：在更新包含组件的VNode之前调用},updated: function(el, binding, vnode, prevVnode){// updated：在包含组件的VNode及其子组件的VNode更新后调用},beforeUnmount: function(){// beforeUnmount：在卸载绑定元素的父组件之前调用},unmounted: function(){// unmounted：当指令与元素解除绑定且父组件已卸载时调用},
})

举例说明-input聚焦

<template><input type="text" v-focus>
</template><script>
export default {directives: {focus: {mounted(el) {el.focus();}}}
}
</script>

示例-防抖指令

防抖

app.directive('debounce',{mounted(el,blinding){// v-debounce:small='500' value==500 arg=='small'// v-debounce:500='goHome' value==goHome方法 arg==500const { value, arg } = blinding// 定义防抖的时间let delay = 500if(typeof value === 'number'){delay = value}else if(arg){delay = parseInt(arg)}// 定时器idlet timer = null// 监听元素的点击事件el.addEventListener('click', function(){// 每次点击重新计时if(timer) clearTimeout(timer)timer = setTimeout(function(){// 到时间执行点击事件if (typeof value == 'function') value()}, delay)}, false)},beforeUnmount(el) {clearTimeout(el._debounceTimer)}
})