el-popover 点击其他位置关闭弹窗

第一次写前端项目，只会一些基础，如有错误请多多指点

问题说明

因开发需求使用了el-popvoer，需要在其中自定义布局且点击布局中的按钮后关闭弹窗；

所以使用:visible属性来控制是否显示，但又发现点击弹窗之外的地方不能再关闭弹窗

在网上搜索答案，发现可以使用element-plus中的ClikcOutside，便按官网中的步骤导入使用

但运行时会出错，显示 "vClickOutside is not define"； 网上搜索也没有看见类似的问题，只能自己试着解决了

解决方法

经过漫长的试错，终于解决啦！！！！

官网里面的import导入不对，导入时需要改成下面的代码：

分为全局和局部（组件中）两种方式

全局注册

在main.js中注册

import ClickOutside from 'element-plus/es/directives/click-outside/index'

const app = createApp(App)
app.directive('click-outside', ClickOutside)

局部注册

在使用的组件中导入

import vClickOutside from 'element-plus/es/directives/click-outside/index'

局部注册需要将ClickOutside改名为vClickOutside

使用

根据Vue使用自定义指令使用方式，在需要的元素上使用

 <div class="edit_box" v-click-outside="hidePop">
       
 </div>

1、点击使用ClickOutside的元素以外的地方就会触发hidePop方法；

2、在hidePop方法中将弹窗的状态变量赋值为false，来关闭弹窗

 附：

自己做个记录，也分享下解决办法，希望能帮到相同问题的同学