Vue自定义指令

先听我闲扯一段:在做项目的时候,有一个需求需要做一个下拉树,用饿了么的组件是没有下拉树的功能,但是组件是有树的,于是只能自己手动的去做一个下拉树的处理,我这里并不是要讲怎么做下拉树,因为做一个下拉是很简单的,我这里要说的是Vue的自定义指令。

这次的难点是:做一个输入框,点击下拉展开,点击任意地方消失。查了好多方法,都不是特别好,在我没思路的时候,去饿了么的组件源码中去查,看看他是怎么实现的(要抄的一样),一看他就是用指令来做的!指令还可以这么用!!!

// 自定义全局指定
Vue.directive('clickoutside', {
 bind: function(el, binding, vode) {
  function documentHandler (e) {
   if (el.contains(e.target)) {
    return false
   }
   if (binding.expression) {
    binding.value(e)
   }
  }
  el.__vueClickOutSide__ = documentHandler
  document.addEventListener('click', documentHandler)
 },
 unbind: function(el, binding) {
  document.removeEventListener('click', el.__vueClickOutSide__)
  delete el.__vueClickOutSide__
 }
})

就这么一段,放在main.js里面,然后调用就好了。

嗯,就是这样的,看来以后得好好的看看Vue指令!

添加新评论