浅谈Vue.js中如何实现自定义下拉菜单指令

  
  
  



  

    

      点击
      

        
零售新物种：药店和便利店合体之后
      
    
  


2  ESC 关闭


现在让我们做个优化，即在按下键盘的 ESC 键时，也能关闭下拉菜单。


js：



bind: function (el, binding, vnode) {
  function clickHandler(e) {
    if (el.contains(e.target) && e.keyCode !== 27) {
      return false;
    }
    ...
  }

  ...
  document.addEventListener('keyup', clickHandler, false);//绑定键盘事件
},
unbind: function (el, binding, vnode) {
    ...
  document.removeEventListener('keyup', el.vueOutsideClick);//解绑
  ...
}



在 bind 函数中，强化了判断，如果点击区域在所在指令元素内部并且没有按下 ESC 键时，才直接返回。即按下  ESC 键时，会执行后续操作（执行表达式中的函数）。


在  unbind 函数中，也解绑了 keyup 事件。
效果：

3 ESC 为可选项


我们可以把 ESC 作为可选项，而这可以通过修饰符来实现。


js：



bind: function (el, binding, vnode) {
  //定义点击函数
  function clickHandler(e) {

    //是否开启开关
    var escSwitch = (binding.modifiers && binding.modifiers.esc);

    if (el.contains(e.target)) {//如果点击区域在所在指令元素内部时
      if (escSwitch && e.keyCode === 27) {//带有了 esc 修饰符，则让程序往下执行
      } else {//直接返回
        return false;
      }
    }
    if (binding.expression) {//如果定义了表达式，则执行表达式中的函数
      binding.value(e);
    }
  }

  ...
}



我们通过 binding.modifiers 来判断自定义指令是否设置了 esc 修饰符，然后以此为基础，来编写后续逻辑。


html：




  

    ...
  


本文示例代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。