下拉框无法收回的解决方法：focus-outside使用方式

在开发过程中遇到过这样一种情况，当select下拉面板展开后，此时如果点击iframe或富文本编辑器的输入框，select的下拉面板没有收回，这是因为在iframe或富文本编辑器的点击没有触发select下拉面板的outside点击事件，所以需要通过focus-outside插件来解决。官方npm网站：https://github.com/txs1992/focus-outside/blob/master/docs/zh-cn.md#readme

安装：npm install focus-outside -S

在需要使用的页面中这样引入：

// import { bind, unbidn } from 'focus-outside'
// 建议使用下面这种别名，防止和你的函数命名冲突了。
import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'

绑定元素的方法：

const btnOne = document.querySelector('#button-one')
const btnTwo = document.querySelector('#button-two')
const btnThree = document.querySelector('#button-three')
const clearBtn = document.querySelector('#button-clear')

// 绑定函数
focusBind(btnOne, callbackOne, 'button-group')
focusBind(btnTwo, callbackTwo, 'button-group')
focusBind(btnThree, callbackThree, 'custom-button')
focusBind(clearBtn, clearCallback)

function callbackOne () {
  console.log('如果你点击的是 btnOne 与 btnTwo 将不会触发这个函数')
}

function callbackTwo () {
  console.log('如果触发了，说明你点击了 btnOne 与 btnTwo 之外的元素')
}

function callbackThree () {
  console.log('你点击了 btn-three 之外的区域')
}

function clearCallback() {
  console.log('清除所有按钮的绑定函数')
  focusUnbind(btnOne)
  focusUnbind(btnTwo)
  focusUnbind(btnThree)
  focusUnbind(clearBtn)
}

绑定函数（bind）需要接收三个参数，第一个参数是要绑定的元素，可以使用上面的document.querySelector方法，也可以使用如

this.$refs.dropdown.$el 的方式

第二个参数是回调函数，即如果在绑定元素外触发点击事件，将调用什么方法（一般在这个回调函数中写入收回下拉框的方法）；

第三个参数是个key值，点击相同key值的元素，不会触发另一个元素的回调方法；

解绑函数（unbind）接收一个参数，即要解绑的元素，解绑后，focus-outside失效。

有使用问题，请留言。