--- theme: channing-cyan # Markdown 主题，默认值：juejin highlight: atom-one-dark # 代码高亮主题，默认值：theme 中指定，没有则默认为 juejin --- ## 背景最近项目中需要实现一个需求，“点击结果列表中的每一项都出现其对应的详情弹框。” 这种需求最适合使用popover来实现了。 > `trigger`属性用于设置何时触发 Popover，支持四种触发方式：`hover`，`click`，`focus` 和 `manual`。对于触发 Popover 的元素，有两种写法： > 1. 使用 `slot="reference"`的具名插槽. > 2. 使用自定义指令`v-popover`指向 Popover 的索引ref。两种元素实现方式可查看官方文档：[弹出框 Popover](http://find.jdfmgt.com/assembly/popover.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95)。在本文中，只使用第一种slot方式。 ## 需求设计和实现 ### 触发方式的选用现在分析上面我的需求，出现了“点击”二字，貌似看起来使用`click`点击触发和`manual`手动触发都可以实现。\ 但是，经过我的实践，手动触发被我pass掉了。\ 原因是，`manual`的实现方式是靠`v-model`判断显隐条件。 ```

...

click出现

``` 通过v-model的方式设置一个visible，控制visible的值，是可以解决***单个表单***的Popover弹出框显隐问题的。但是我的需求是要在Tree树结构上做***每条数据***的popover。只靠一个visible值会导致所有popover弹窗**同时出现和同时隐藏**。这一点儿也不满足要求！！！所以，要用`click`了。同时还有一个好处，使用click的触发方式还能自带一些功能。比如 1. 二次点击该数据可隐藏弹框。 2. 点击页面空白处也可隐藏弹框。 ### Tree树结构中的显隐条件实现解决办法是：通过每条数据的唯一id给每个popover增加一个`ref`，用来判断自己的显隐。 ```

...

确定

``` 我给每条数据增加了一个点击事件`handleClick`，和一个data字段`selectedPoppverId`用于控制前一个popover的隐藏和最新一个popover的展示。 ``` ``` ## 一些问题和优化点 ### 有时候doClose不生效？在实现时，ref使用变量的形式，因为是多个循环的popover。如果需要点击确定来关闭el-popover窗口，却发现只引用doClose方法不生效，关不掉。\ 那么可以通过模拟点击页面空白处来实现。简单高效。。。 ``` //点击确定时，关闭popover，最简单直接的方式就是模拟点击页面空白处 handleffirm () { document.body.click(); }, ``` ### Tree结构中，我想让他点击父节点不出现popover，点击子节点的时候才出现。在`handleClick`里加个判断就好了。 ``` if(node.childNodes.length === 0) { ...//当前节点没有子节点的时候才执行doShow() } ``` ### popover中内容过高，丢到可视范围外了在使用`2.x`版本的`element-UI`时，里面的`Popover 气泡卡片`组件，有自带的自动适应位置的功能；在 `element plus` 中，直接使用，已经无法自适应气泡弹窗的位置了。想要在页面里，当 `Popover` 弹出框的位置接近边界时，应该自动切换到相反的方向进行显示。 ``` ``` ### 我popover中展示的都是动态获取的数据，怎么数据不对呀上面实现了多条数据popover的显隐效果。当然，一般的项目需求中，popover内的数据也都是动态获取的。那么就需要手动做实时更新。在执行`doShow`方法前先执行`updatePopper`方法。 ``` if( this.$refs[refName]) { this.$refs[refName].updatePopper() this.$nextTick(() => { this.$refs[refName].doShow(); }) } ``` 以上，大致就能实现普通的项目需求了。其实也能看出来，popover和tooltip的功能很相似。 > 官方文档上都说了，“Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 [Tooltip](http://find.jdfmgt.com/assembly/tooltip.html) 的文档，在此文档中不做详尽解释。”