先听我闲扯一段：在做项目的时候，有一个需求需要做一个下拉树，用饿了么的组件是没有下拉树的功能，但是组件是有树的，于是只能自己手动的去做一个下拉树的处理，我这里并不是要讲怎么做下拉树，因为做一个下拉是很简单的，我这里要说的是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指令！