如何编写Vue基础长尾词popover弹出框并解决相关bug问题？

本文共计3788个文字，预计阅读时间需要16分钟。

目录+引言+结构+创建组件文件，实现基本功能+绝对定位+如何点击外部关闭+Bug：监听body问题+Bug：再次打开失败+Bug：点击popover气泡本身也会关闭popover+其他Bug

目录

• 引言
• 制定结构
• 创建组件文件，实现基本功能
• 绝对定位
• 如何点击外部关闭
• Bug：监听body问题。
• Bug：再次打开失败。
• Bug：点击popover气泡本身也会关闭popover
• 其他Bug
• Bug：外部有overflow:hidden，会遮挡popover。
• Bug：位置其实不正确
• Bug：.stop会打断事件链
• Bug：如果只点击触发器，会进行重复监听。

引言

最近做了一套Vue 的UI组件框架，里面牵涉到的popover组件个人觉得很有意思，也是个人觉得做出来最好看的一个组件。

首先新建一个Vue项目，无需赘述了。

制定结构

给组件命名为bl-popover

<bl-popover> <template slot="content"> 这是内容，这是内容，这是内容。 这是内容，这是内容，这是内容。