javascript - vuejs 失去焦点，单击全局隐藏某些浮动元素

Question

先看图，

我们想实现一个这样的功能， 单击高级搜索，弹出一个p，p里面是slot进去的，有各种标签，包括表单元素。再单击其他区域，会隐藏这个弹出的p，类似blur事件。

麻烦给点思路实现这个组件（功能）， 写一个这样的组件，弹出框的内容slot进去，里面的表单可以进行操作输入，以及动态渲染dom结点。
请问有朋友实现过类似的功能吗，麻烦给点思路。

Answer 1

主体上可以看这个vue-weui，对于点击slot区域外，自动关闭弹出框，基本的方法可以是
1.在slot外包裹一个p,position为relative,z-index设置为高于透明遮罩层即可。
2.在点击高级搜索时,在body下append一个透明遮罩层，遮罩层z-index低于弹出的sloat，设置透明遮罩层的click事件为关闭slot。

Answer 2

//html
<p v-show="isShowDialog">

//js
document.addEventListener('click', (e) => {
  if (!this.$el.contains(e.target)) this.isShowDialog = false;
})

Answer 3

我的方案是给document一个点击事件关闭这个弹窗，然后给这个p一个阻止冒泡