Popover
需求演示
- 击按钮弹出浮层，再次点击关闭浮层
- 如果容器上有
overflow: hidden，浮层依然能完整显示 - 浮层可以显示在四种位置：
left right top bottom - 内容支持文本，
html - 支持点击
popover 里的关闭按钮，进行关闭 - 支持
click 触发
API
| 参数 | 说明 | 类型 | 默认值 |
|---|
| trigger | 触发方式 | String | click |
| position | 弹出内容出现位置 | String | top |
实现的逻辑
- 根据
position 的传入，prop 获取，给弹出的标签设定 class - 使用了
calc 计算 css 长宽 - 使用
addEventListener 来做hover 和 click 的事件监听，用传入的值来判断选择哪种监听方式 - 使用
contains来判断点击的元素是否包含目标元素 popover 如果是一个过长的单词不换行，word-break:break-all;window.scrollY+top 和 window.scrollX+left，解决相对定位不准 bug- 使用了
beforeDestory去除事件监听器,监听器过多会浪费内存,关闭 popover removeEventListener