六虎

源码学习——vue-popper

源码学习——vue-popper

作者：

胡哥有话说

在

前言

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

源码

vue-popperjs是依据poper.js开发，适用于vue的组件，这么看来再底层一点的源码其实是popper.js。在github翻开相关代码，找到src文件夹，里边的popper.js.vue便是事务代码。

源码学习——vue-popper

页面元素

组件源码十分简略，就一个vue页面，咱们就从template下手先查看一下页面相关元素。

源码学习——vue-popper

template元素很简略，最深层级只要四层，咱们一层层来看：

  • component动态组件，组件表明的元素由参数tagName决定，tagName是props参数，默许值为span，也便是说第一层默许是span标签。
    源码学习——vue-popper
  • transition动画组件，vue的内置组件可以设置元素的脱离进入动画，相关动画的特点值也都设置成了props参数。
    源码学习——vue-popper
  • transition的span标签，span包裹着一个默许插槽，用来展现弹出框内容，关键特点showPopper操控弹出框内的展现。
  • reference插槽，与transition同级，展现触发弹出框的元素。留意该插槽是签字插槽，使用时必需要加上插槽名称，上面的是默许插槽，直接填入元素即可。

处理逻辑

咱们直接从props参数下手，除了上面提到过的props参数，剩余要点参数便是：

  • trigger:弹出框内容弹出办法，默许为hover，弹出办法一共只要五种，经过validator对传参进行了校验，校验办法为数组的indexOf办法。这个校验办法有很多种，如果是我，我会用includes。

源码学习——vue-popper

源码利用switch case，依据trigger的值给触发元素添加不同的行为事情，click、clickToToggles逻辑是一样的，md上也提到了已经将click触发给弃用了。而clickToOpen、clickToToggle都绑定了click事情。
clickToOpen：翻开弹出框后只要点击弹出框外的区域才会封闭，绑定事情为doShow，直接将showPopper设置为true，当焦点不再触发元素时，点击触发doClose事情将其封闭。
clickToToggle：点击切换。绑定事情为doToggle，先阻挠了冒泡与默许事情，后边直接将showPopper赋值为非。
源码学习——vue-popper

留意上面doToggle函数中的阻挠冒泡与默许事情有对应的props参数，所以用if包裹了一下。

  • options：弹框框装备项，data有默许装备项popperOptions，在created会用Object.assign将两者兼并。装备项有placement特点，表明弹出框出现方位，该功能是经过css中的特点选择器实现的。
    源码学习——vue-popper

    特点选择器是很有用的一个用法，不了解的主张咱们好好了解一下。vue-popper依据popper.js开发，最终咱们看下popper.js详细的使用办法：
  1. 引入Popper弹出器。
import Popper from 'popper.js';
  1. 实例化弹出器。
// 触发元素、弹出元素、装备项
this.popperJS = new Popper(this.referenceElm, this.popper, this.popperOptions);

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

总结

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

更多文章