vue自定義指令clickoutside擴展--多個元素的並集做爲inside

都是我的理解，若是發現錯誤，懇請你們批評指正，謝謝。還有我說的會比較囉嗦，由於是以自身菜雞水平的視角來記錄學習理解的過程，見諒。

1.前言

產品使用vue+element做爲前端框架。在功能開發過程當中，不免遇到使用element的組件沒辦法知足特殊的業務須要，須要對其進行定製，例如要求選擇器的彈出框中，增長搜索過濾（跟目前element的輸入建議不太同樣）。因而想說說以前修改element組件，並定製爲業務組件過程當中遇到的問題。

ps:由於對某些組件改動很大，因此是直接拷貝了一份源碼，而後再進行修改，可是這樣會遇到挺多問題，建議對於vue組件若是改動不大，只是簡單功能擴展，就直接使用繼承的方式修改。

2.clickoutside指令

element中自定義vue的指令之一，clickoutside顧名思義，就是當鼠標點擊了指令所綁定元素的外部時，就會觸發綁定方法。用途就以el-select爲例，當選擇器的下拉框展現時，監聽鼠標點擊事件，若是鼠標位置在整個選擇器外部時，進行隱藏下拉框。

2.1使用方式

引入Clickoutside.js

import Clickoutside from 'element-ui/src/utils/clickoutside'

聲明指令使用

directives: { Clickoutside },

模板中正式使用

<div v-clickoutside="handleClickOutside">
</div>

2.2實現介紹

簡要說明下原理，首先vue自定義指令自己(不瞭解能夠點擊連接查看官網介紹)。主要就是利用vue指令的功能，獲取所綁定元素的dom對象dom_A以及傳遞過來的回調方法fun_A，而後監聽瀏覽器的mousedown和mouseup事件(mousedown做爲輔助信息，真正觸發傳遞的回調方法的是mouseup事件)，當前事件中鼠標位置對應的dom對象dom_B不屬於dom_A，則表明鼠標點擊了dom_A外部，觸發clickoutside回調方法。

2.3擴展介紹

理論上clickoutside只能也只須要綁定一個元素做爲inside，可是一些特殊的緣由(多是代碼不夠好)，要求clickoutside能夠選定多個元素做爲inside，當鼠標點擊了這些元素所構成的inside的外部時，再觸發事件。
結合下圖，A與B兩個元素做爲一個inside，當鼠標點擊在click1位置時，觸發clickoutside，當鼠標點擊click2或者click3位置時都不觸發clickoutside。

2.3擴展實現

要實現上述功能，就必須獲取到A和B的dom對象，而後在原先鼠標事件的監聽的基礎上，判斷鼠標位置是否都不包含在A和B中，若是是的話再觸發clickoutside。
實現方式爲，在A和B的父級parent元素上綁定v-clickoutside:yourClassName="handleClickOutside"，在A和B元素上添加同一個class樣式，樣式名稱與指令冒號後面內容一致class="yourClassName"。主要在處理指令綁定時，經過binding.arg便可獲取到A和B共有的class，存放在dom變量中。在鼠標放開觸發事件處理時，經過class獲取到他們的dom對象。

2.3.1使用示例

clickoutside原來的使用方式不受影響，只是添加了多個元素並集做爲inside的功能。
引入改成本身修改後的clickoutside.js，聲明不變，擴展功能在模板中的使用方式

<div v-clickoutside:exactAreaClassName="handleClickOutside">
    Parent
    <div class="exactAreaClassName">A</div>
    <div class="exactAreaClassName">B</div>
</div>

2.3.2代碼

// 引入Vue用以判斷當前運行環境
import Vue from 'vue'
// element封裝的一些經常使用dom操做，這裏on能夠先當作是addEventListener的封裝
import { on } from 'element-ui/src/utils/dom'
// 全部綁定了clickoutside指令的元素的dom對象數組
const nodeList = []
// 用來作存放於dom對象中clickoutside相關參數對象的key
const ctx = '@@clickoutsideContext'

let startClick
let seed = 0
// 鼠標按下時，記錄此時事件信息
!Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e))
// 鼠標鬆開時候，遍歷綁定clickoutside的節點，進行判斷是否在節點外部以觸發回調
!Vue.prototype.$isServer && on(document, 'mouseup', e => {
  nodeList.forEach(node => node[ctx].documentHandler(e, startClick))
})

// 是否在特殊限定範圍內
function ifInExact (exactElms, target1, taget2) {
  for (let i = 0; i < exactElms.length; i++) {
    let elm = exactElms[i]
    if (elm.contains(target1) || elm.contains(taget2) || elm === target1) return true
  }
  return false
}

// 是否有特殊限定範圍
function ifHasExact (el, exactArea) {
  if (!exactArea) return false
  return el.getElementsByClassName(exactArea)
}

function createDocumentHandler (el, binding, vnode) {
  return function (mouseup = {}, mousedown = {}) {
    if (!vnode ||
      !vnode.context ||
      !mouseup.target ||
      !mousedown.target ||
      (vnode.context.popperElm &&
        (vnode.context.popperElm.contains(mouseup.target) ||
          vnode.context.popperElm.contains(mousedown.target)))) return
    let exactElms = ifHasExact(el, el[ctx].exactArea)
    // 若是是有特殊限定範圍的，則進行判斷當前點擊是否在 限定範圍內
    if (exactElms) {
      if (ifInExact(exactElms, mouseup.target, mousedown.target)) {
        return
      }
    // 無特殊限定範圍，則判斷點擊是否在默認的指令所在範圍內
    } else if (el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target) {
      return
    }
    if (binding.expression &&
      el[ctx].methodName &&
      vnode.context[el[ctx].methodName]) {
      vnode.context[el[ctx].methodName]()
    } else {
      el[ctx].bindingFn && el[ctx].bindingFn()
    }
  }
}

export default {
  bind (el, binding, vnode) {
    nodeList.push(el)
    const id = seed++
    el[ctx] = {
      id,
      documentHandler: createDocumentHandler(el, binding, vnode),
      methodName: binding.expression,
      bindingFn: binding.value,
      // 特殊限定範圍的class，限定範圍爲該class的全部元素的並集
      exactArea: binding.arg
    }
  },

  update (el, binding, vnode) {
    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode)
    el[ctx].methodName = binding.expression
    el[ctx].bindingFn = binding.value
    // 附加 真正起做用部分
    el[ctx].exactArea = binding.arg
  },

  unbind (el) {
    let len = nodeList.length

    for (let i = 0; i < len; i++) {
      if (nodeList[i][ctx].id === el[ctx].id) {
        nodeList.splice(i, 1)
        break
      }
    }
    delete el[ctx]
  }
}

3.最後

以上就是關於clickoutside的學習和擴展。

• 1.引用element的popup注意事項，如el-select-menu即el-select中的select-dropdown.vue。
• 2.使用cropperjs製做頭像裁剪。瀏覽器讀取本地圖片並展現，仿微博頭像排版，裁剪後上傳服務器。
• 3.vue指令中的參數vnode學習