vue自定义指令

vue自定义指令

vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令又分为全局的自定义指令和局部自定义指令。

全局自定义指令
全局注册主要是用过Vue.directive方法进行注册
Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据。

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
  }
})
使用：
<input type="text" v-focus />

局部自定义指令
局部注册通过在组件选项对象中设置directives属性

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    }
  }
}
使用：
<input type="text" v-focus />

自定义指令的钩子函数

钩子函数：
bind : 只调用一次，指令第一次绑定到元素时调用
inserted : 被绑定元素插入父节点时调用
update : 所有组件的虚拟节点VNode更新时调用
componentUpdated : 指令所在组件的虚拟节点VNode以及子虚拟节点更新之前
unbind : 只调用一次，指令与元素解绑时调用
钩子函数的参数：el绑定元素,binding一个对象 包含指令的值value,vnode虚拟节点,oldVnode旧的虚拟节点等

对于binding 对象，包含以下property：

属性名	含义
name	指令名，不包含 v- 前缀
value	指令的绑定值
oldValue	指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用
expression	字符串形式的指令表达式。例如：v-dir=“true + false”
arg	传给指令的参数。例如：v-dir:foo 参数为foo
modifiers	一个包含修饰符的对象。例如：v-dir.foo 修饰符对象为{foo: true}
vnode	Vue 编译生成的虚拟节点
oldVnode	上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

对于expression 和 value ，官网上说expression是表达式，value是表达式的结果，二者并不相同

v-dir="false + true"

下面对于modifiers修饰符的小例子：

<template>
    <div class='zbt'>
        <div class="he" v-dir.foo="{color:'red'}">hello</div>
    </div>
</template>

<script>
export default {
    directives:{
        dir:{
            inserted(el,binding) {
                el.style.color = binding.value.color
                // 如果有foo修饰符，就实现拖拽功能
                if(binding.modifiers.foo) {
                    el.onmousedown = function(ed) {
                        let x = ed.clientX - el.offsetLeft
                        let y = ed.clientY - el.offsetTop
                        document.onmousemove = function(ev) {
                            el.style.left = ev.clientX - x + 'px'
                            el.style.top = ev.clientY - y + 'px'
                        }
                    }
                    el.onmouseup = function() {
                        document.onmousemove = null
                    }
                }
            }
        }
    }
};
</script>
<style lang='scss' scoped>
    .he {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
    }
</style>

应用场景
关于自定义组件还有很多应用场景，如：拖拽指令、输入框防抖、图片懒加载、权限校验等等应用场景。

举个小栗子：
详细请看：拖拽
更新中。。。