源码学习——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页面,我们就从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具体的使用方法:
  1. 引入Popper弹出器。
js 复制代码
import Popper from 'popper.js';
  1. 实例化弹出器。
js 复制代码
// 触发元素、弹出元素、配置项
this.popperJS = new Popper(this.referenceElm, this.popper, this.popperOptions);

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

总结

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

相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜7 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui