主要为大家详细介绍了vue组件实现弹出框点击显示隐藏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码，供大家参考，具体内容如下 效果如下图   由于我的更改密码弹出框是一个组件引用的，所以在一开始是隐藏的，这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候，操作执行完后当前页面的更改按钮已经被弹出框覆盖了。所以只能在弹出页面点击取消实现关闭隐藏弹出框。这样就需要写两个点击事件，但是两个点击事件就会有冲突，需要点击两下才能使弹出框显示和隐藏。然后我就用的以下方法，希望可以帮到大家！！！ 代码如下

如上图所示，这次要实现一个点击出现操作弹框的效果；并将这个功能封装成一个函数，便于在项目的多个地方使用。 具体思路是： 　　封装一个组件，组件保护一个插槽，我们可以根据不同的场景，利用插槽随意在这个弹框里插入任何元素，这个弹框显示时根据我鼠标的点击位置，定位弹窗的位置，并在组件里面监听鼠标抬起事件，触发事件时将弹窗隐藏； 接着在函数中利用createElement和appendChild方法将弹出框创建并插入到页面中； 　  本次实现基于vuecli3 接下来，具体实现：      首先，我们先