Vue中判断点击是否在组件外

自己使用div模拟select，有如下需求：

• 组件获得焦点时，自动弹出下拉菜单
• 鼠标点击下拉菜单时，下拉菜单不能收回
• 鼠标点击输入框时，下拉菜单不能收回
• 鼠标点击其他任何地方或者组件失去焦点时，下拉菜单自动收回

核心问题就是判断鼠标点击事件是否在组件的dom树中发出，主要代码如下：

const app = document.body
let flag = false
\\创建回调逻辑
onClick = function(e) {
  return flag = document.getElementById("id").conatins(e.target)
}
\\添加事件监听器
app.addEventListener('click', onClick, true)
\\删除监听器
app.removeEventListener('click', onClick, true)

整个过程很简单，就是给根元素增加一个点击事件监听器，绑定一个处理函数，每当触发点击事件之后就检查点击的元素在不在组件的dom元素树种，如果不在就将标记改为否，反之就改为真。