VUE——自定义指令

v-focus：自动获取焦点

DOM插入便获取焦点：

Vue.directive('focus',{
  inserted: function (el) {
    el.focus()
  }
})

根据指令的值决定自否获取焦点：

Vue.directive('focus',{
  inserted:function(el,binding){
    if(binding.value){
      el.focus()
    }
  }
})

v-drag：拖拽

注：被拖拽的元素必须有定位样式

Vue.directive('drag',function(el,binding){
  let $el=el;
  $el.οnmοusedοwn=function(ev){
    ev=window.event?window.event:ev;
    let disX=ev.clientX-$el.offsetLeft;
    let disY=ev.clientY-$el.offsetTop;
    document.οnmοusemοve=function(ev){
      ev=window.event?window.event:ev;
      let L=ev.clientX-disX;
      let T=ev.clientY-disY;
      $el.style.left=L+'px';
      $el.style.top=T+'px';
    }
    document.οnmοuseup=function(){
      document.οnmοusemοve=null;
      document.οnmοuseup=null;
    }
  }
})

拓展：自定义键盘信息

Vue.config.keyCodes.ctrl=17

键盘一般配合事件使用，

如：@keydown.enter='show'——按下enter键时触发

@keydown.key='show'——按下key键时触发(key:键盘上可见的值，eg:a、b.......)

自定义：

    Vue.directive('on').keyCodes.ctrl=17;//给keycode=17的键起了名字叫‘ctrl’

    使用的时候@keypress.ctrl即可。