vue 封装hover指令

相信习惯了使用jq的hover事件的小伙伴们用vue时想使用hover事件感觉好麻烦，这里我给使用vue的自定义指令封装了一个hover指令。

cli-vue main.js

//自定义hover指令
Vue.directive('hover',{
  bind(el, binding){
    el.onmouseover = ()=>{
      if (typeof binding.value.ms != "undefined"){
        binding.value.ms()
      }
      if (typeof binding.value.class != "undefined"){
        el.classList.add(binding.value.class)
      }
    }
    el.onmouseout = () => {
      if (typeof binding.value.mo != "undefined") {
        binding.value.mo()
      }
      if (typeof binding.value.class != "undefined") {
        el.classList.remove(binding.value.class)
      }
    }
    
  }
})

使用方法

 v-hover="{class:'actives',ms:ms,mo:mo}" 
非必须 class 给添加移入激活的class，移出时清除。
非必须 ms 移入事件
非必须 mo 移出事件