directives 自定义指令

作用：间接操作dom 

属性参考：https://blog.youkuaiyun.com/hant1991/article/details/74626002

 

例子1：

<button v-color.13="flag">1111</button>  <!-- 13是修饰符 -->


directives:{  //间接操作dom
    color(el,bindings){ //你把指令放到谁身上，谁就是el  el指的是button
      // console.log(arguments)
      // console.log(bindings) //bindings 绑定的属性，只是一个属性
      el.style.background=bindings.value
    }
  }

 

例子2：

.box{
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
}

<div v-drag class="box" ></div>

directives:{  //间接操作dom
    drag(el){
      el.onmousedown=function(e){
        var disx=e.pageX-el.offsetLeft;
        var disy=e.pageY-el.offsetLeft;
        document.onmousemove=function (e){
          el.style.left=e.pageX-disx+'px'
          el.style.top=e.pageY-disy+'px'
        }
        document.onmouseup=function(){
          document.onmousemove=document.onmouseup=null
        }
        e.preventDefault()
      }
    }
  }

 

转载于:https://www.cnblogs.com/sayidf/p/10118561.html