前言

在翻阅element ui的Popover弹出框组件描述时，发现el-popover与el-tooltip都是基于vue-popper开发的，勾起了我的兴趣，本节我们一起来学习下vue-popper的源码。

源码

vue-popperjs是基于poper.js开发，适用于vue的组件，这么看来再底层一点的源码其实是popper.js。在github打开相关代码，找到src文件夹，里面的popper.js.vue就是业务代码。

组件源码非常简单，就一个vue页面，我们就从template入手先查看一下页面相关元素。

template元素很简单，最深层级只有四层，我们一层层来看：

component动态组件 ，组件表示的元素由参数tagName决定，tagName是props参数，默认值为span，也就是说第一层默认是span标签。
transition动画组件，vue的内置组件能够设置元素的离开进入动画，相关动画的属性值也都设置成了props参数。
transition的span标签，span包裹着一个默认插槽，用来展示弹出框内容，关键属性showPopper控制弹出框内的展示。
reference插槽，与transition同级，展示触发弹出框的元素。注意该插槽是具名插槽，使用时必须要加上插槽名称，上面的是默认插槽，直接填入元素即可。

我们直接从props参数入手，除了上面提到过的props参数，剩下重点参数就是：

trigger:弹出框内容弹出方式，默认为hover，弹出方式总共只有五种，通过validator对传参进行了校验，校验方法为数组的indexOf方法。这个校验方式有很多种，如果是我，我会用includes。

源码利用switch case ，根据trigger的值给触发元素添加不同的行为事件，click、clickToToggles逻辑是一样的，md上也提到了已经将click触发给弃用了。而clickToOpen、clickToToggle都绑定了click事件。

clickToOpen：打开弹出框后只有点击弹出框外的区域才会关闭，绑定事件为doShow，直接将showPopper设置为true，当焦点不再触发元素时，点击触发doClose事件将其关闭。

clickToToggle：点击切换。绑定事件为doToggle，先阻止了冒泡与默认事件，后面直接将showPopper赋值为非。

注意上面doToggle函数中的阻止冒泡与默认事件有对应的props参数，所以用if包裹了一下。

options：弹框框配置项，data有默认配置项popperOptions，在created会用Object.assign 将两者合并。配置项有placement 属性，表示弹出框出现方位，该功能是通过css中的属性选择器 实现的。
属性选择器是很有用的一个用法，不了解的建议大家好好了解一下。vue-popper基于popper.js开发，最后我们看下popper.js具体的使用方法：

js 复制代码

import Popper from 'popper.js';

js 复制代码

// 触发元素、弹出元素、配置项
this.popperJS = new Popper(this.referenceElm, this.popper, this.popperOptions);

3.监听showpopper，为true调用enableEventListeners事件，为false调用disableEventListeners事件。最后在组件销毁时调用destroy事件。

以上就是vue-popper实现过程，重点就是触发元素、弹出元素，相关事件与参数都是围绕着这两部分的，popper.js占比较少，就是调用了一下实例方法。