VUE之自定义指令directive

除了内置核心指令( v-model、v-show、v-html )，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。
首先我们要明确:
在Vue里，代码复用的主要形式和抽象是组件。然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。

自定义指令：

    directive(参数1,参数2)
    参数1：指令名称
    参数2：指令的配置项  可以是函数 也可以是对象
        函数：
            参数1：使用当前指令的元素
            参数2：指令的详情信息
                {modifiers:修饰符,value:指令的结果(也就是它所对应的值)}

Vue.directive：全局创建自定义指令

Vue.directive("alley",{
    bind(){
        //当元素使用当前指令的时候会被调用，只会调用一次。用来做初始化
        console.log("bind")
    },
    inserted(){
        //当使用指令的元素被插入到父节点(#app)的时候会被触发
        console.log("inserted")
    },
    update(){
        //只要当前元素不被移除，其他操作几乎都会触发这2个生命周期 先触发update后触发componentUpdated
        //虚拟DOM只要涉及到元素的隐藏 显示(display) 值得改变  内容的改变等都会触发虚拟DOM更新
        console.log("update")
    },
    componentUpdated(){
        console.log("componentUpdated")
    },
    unbind(){
        //当使用指令的元素被卸载的时候会执行(简单的来说其实就是当前元素被移除的时候)
        console.log("unbind")
    }
})

directives:局部创建自定义指令

var vm = new Vue({
  el: '#app',
  directives:{
    focus:{
      inserted: function (el) {
        el.focus()
      }      
    }
  }
})

自定义指令的钩子函数如下

clipboard.png

是不是非常简单？
接下来我们用自定义指令的方法为vue写一个v-drag拖拽功能作为例子

export default {
    name:"App",
    directives:{
        drag(el,{modifiers,value}){
            if(value){
                var disX,disY;
                var {l,t} = modifiers;
                el.style.position = "absolute";
                el.addEventListener("mousedown",mousedown)


                function mousedown(e){
                    disX = e.offsetX;
                    disY = e.offsetY;
                    document.addEventListener("mousemove",move)
                    document.addEventListener("mouseup",up)
                }

                function move(e){
                    var x = e.clientX - disX;
                    var y = e.clientY - disY;
                    if((l&&t) || (!l&&!t)){
                         el.style.left = x + 'px';
                         el.style.top = y + 'px';
                         return;
                    }

                    if(l){
                        el.style.left = x + 'px';
                         return;
                    }

                    if(t){
                        el.style.top = y + 'px';
                         return;
                    }
                    

                   
                }
                function up(){
                    document.removeEventListener("mousemove",move)
                    document.removeEventListener("mouseup",up)
                }
            }
            
        }
    },
    data(){
        return {
            flag:true,
        }
    }
   
}

通过import在main.js就可以使用啦