思考步驟？

1、給document增加一個click事件監聽

2、當發生click事件的時候判斷是否點選的當前物件結合著本思路和指令咱們來實現。

簡單介紹vue指令
一個指令定義物件可以提供如下幾個鉤子函式 (均為可選)：

bind：只調用一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。
inserted：被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。
update：所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函式引數見下)。
componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。
unbind：只調用一次，指令與元素解綁時呼叫。
接下來我們來看一下鉤子函式的引數 (即 el、binding、vnode 和 oldVnode)。
 

程式碼實現

檔案位置：src/directive/clickBlankCloseBox.js

.contains的使用

// 自定義指令點選空白關閉box
export default {
  // 初始化指令
  bind(el, binding) {
    function documentHandler(e) {
      // 這裡判斷點選的元素是否是本身，是本身，則返回
      if (el.contains(e.target)) {
        return false
      }
      // 判斷指令中是否綁定了函式
      if (binding.expression) {
        
 
// 如果綁定了函式 則呼叫那個函式，此處binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 給當前元素繫結個私有變數，方便在unbind中可以解除事件監聽
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update() {},
  unbind(el) {
    // 解除事件監聽
    document.removeEventListener('click', el.__vueClickOutside__)
    
 
delete el.__vueClickOutside__
  }
}

在vue檔案中引入：

import clickoutside from '@/directive/clickBlankCloseBox'

注入指令：

繫結：

方法：