导出下拉菜单的指令：（让元素显示/隐藏）

1). 导出下拉指令对象

在 src/directives 下新建 dropdown.js 文件，复制贴入以下代码：

src/directives/dropdown.js

xport default {
  bind(el, binding, vnode) {
    const handler = () => {// 当前元素的事件处理器
      el.parentElement.classList.toggle('open')// 找到当前元素的父元素，切换它的 open 类
    }

    const documentHandler = (e) => {// document 的事件处理器
      const target = e.target// 当前点击的目标

      if (target.isSameNode(el) || el.contains(target)) return// 如果点击的是当前元素，或者是当前元素的后代节点，就不处理
      el.parentElement.classList.remove('open')// 找到当前元素的父元素，移除 open 类
    }

    el.addEventListener('click', handler, false)
    document.addEventListener('click', documentHandler, false)

    el.destroy = () => {
      el.removeEventListener('click', handler, false)
      document.removeEventListener('click', documentHandler, false)
      el.destroy = null
    }
  },
  unbind(el) {
    el.destroy()
  }
}

2). 注册全局下拉指令

打开 src/directives/index.js 文件，复制贴入以下代码：

src/directives/index.js

import Vue from 'vue'
import validator from './validator'
import dropdown from './dropdown'

const directives = {
  validator,
  dropdown
}

for (const [key, value] of Object.entries(directives)) {
  Vue.directive(key, value)
}

我们这里使用一个循环，来注册我们的所有指令，Object.entries 返回给定对象的键值对数组，以 Object.entries(directives) 的返回为例：

[['validator', {...}], ['dropdown', {...}]]

3). 使用下拉菜单指令

打开 TheEntry.vue 文件，查找 <a href="javascript:;">，添加 v-dropdown：

src/components/layouts/TheEntry.vue

<a v-dropdown href="javascript:;">
  <span v-if="user">
    <img v-if="user.avatar" :src="user.avatar" class="avatar-topnav">
    <span v-if="user.name">{{ user.name }}</span>
  </span>
  <span v-else>佚名</span>
  <span class="caret"></span>
</a>