#说明

实际上不仅是vue,只要是能用js写的都能用这个思路(react、原生),这里是按照vue给出示例

假定有一个需求:

• 当你点击某个按钮时出现一个 自定义元素 它可以是一个弹窗、图片或者其他
• 当我点击除了这个 自定义元素 的其他区域时,关闭它

下面将一步一步地实现上图中效果

一、实现点击时,元素出现在鼠标位置

1. 首先定义并写好 悬浮窗元素以及样式,重点需要将其设置为 position: fixed;
2. 编写一个函数,点击时触发: 获取当前鼠标的 X、Y轴位置,并将其存到 data中
3. 将此data绑定到悬浮元素的 style中

```vue

> > <a name="1d65fc23"></a>
###### 至此,点击出现弹窗,且弹窗位置出现在点击时的位置,`但怎么关闭呢?`


<a name="3d74bef2"></a>
# 二、实现点击其他位置,隐藏自定义div

> 1. 首先在 **整个模块组件(点击隐藏生效范围)** 中添加一个 `hidePanel事件` : 只要在这个整体模块下的点击事件都能监听到,并进行处理
> 2. 给不需要点击隐藏的部分加上一个`类`或者`id`: 当点击带有这种`class`或`id`的元素时,不会隐藏自定义元素
> 3. 定义 `hidePanel事件`:

> - 首先获取绑定了`class`的所有元素
> - 随后每次点击时判断是否点击了这些元素,如果不是,则将自定义元素隐藏即可

> > <a name="a7c76af9"></a>
###### 这里只给出区别代码,最后会完整给出代码

> ```vue
<template>
<!-- 假设这个div就是需要点击隐藏的最外层模块,给他绑定事件 -->
<div @click="hidePanel">
 <el-button :size="$size" plain @click="showDtl">点击出现弹窗</el-button>
   <!-- 注意,这里class名新增了一个 `show-sort-btn` -->
    <div
     class="sort-buttons  show-sort-btn"
     v-show="sortShow"
     :style="{'left':sortPlace.left,'top':sortPlace.top}"
   >
     </div>
</div>
</template>
<script>
   export default {
       methods:{
             hidePanel (event) {
               //这里可以自定义,如果是唯一的id,则不用遍历
                 let btn = document.querySelectorAll('.show-sort-btn')
                     let flag = false
                 // 将nodeList转换为真正的数组
                 btn = [...btn]
                 // 遍历转换后的数组,判断点击的是否是出现
                 btn.map(item => {
                   if (item.contains(event.target)) flag = true
                 })
                 // 如果点击的不是赋予此类名的元素,则隐藏
                 if (!flag) this.sortShow = false
               },
       }
   }
</script>

至此,功能已经实现

三、完整代码

```vue

```