前言
建议先看上篇文章以了解Popper的用途：
[element-ui源码]element-ui中的神器Popper（使用方法）
1.关于popperjs
Popper.js是网上一个开源项目(并非属于element-ui)，其专门用于处理冒泡特性。
这里我以一个简单的例子介绍Popper.js，先放示例代码：
<!DOCTYPE html>
<title>Popper example</title>
<style>
#tooltip {
height: 100px;
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 13px;
}
#button{
margin: 600px 400px;
}
.area{
position: relative;
width: 400px;
height: 400px;
border:1px solid gray;
overflow: auto;
}
</style>
<body>
<div class="area">
<button id="button" aria-describedby="tooltip">I'm a button</button>
<div id="tooltip" role="tooltip">I'm a tooltip</div>
</div>
</body>
<!--引入popperjs-->
<script src="https://unpkg.com/@popperjs/core@^2.0.0"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
/**
* 创建Popper,
* 第一个参数为Popper的基准DOM
* 第二个参数为Popper的弹出DOM
* 第三个参数为配置对象
*/
Popper.createPopper(button, tooltip, {
placement: 'right',
});
</script>
效果如下：
2.element-ui中的popperjs
element-ui中也有使用Popper.js，不过并不是作为依赖包的形式。而是以简化的形式重构popper.js部分代码，让其在保留原来的一些基本特征上。其路径为**element-dev\src\utils\popper.js。**这个文档比较大，1200多行，且有大量的注释把很多地方都解释清楚了，我就不详细说明了（我自己也还有很多没看懂）。
3.vue-popper.js
element-ui中大多数组件接入Popper都是通过引入vue-popper后mixin的，不过不是所有组件都全部混入，像el-select是全部混入，而el-cascader是部分混入。这里我就直接贴vue-popper的源码且加上部分说明注释，代码相对简单。
推荐先看element-dev\src\utils\popper.js再看vue-popper.js
// src\utils\vue-popper.js
import Vue from 'vue';
import {
PopupManager
} from 'element-ui/src/utils/popup';
const PopperJS = Vue.prototype.$isServer ? function() {} : require('./popper');
const stop = e => e.stopPropagation();
/**
* @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
* @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.
* @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)
* @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).
* @param {Boolean} [visible=false] Visibility of the popup element.
* @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style.
*/
export default {
props: {
transformOrigin: {
type: [Boolean, String],
default: true
},
placement: {
type: String,
default: 'bottom'
},
boundariesPadding: {
type: Number,
default: 5
},
reference: {},
popper: {},
offset: {
default: 0
},
value: Boolean,
visibleArrow: Boolean,
arrowOffset: {
type: Number,
default: 35
},
appendToBody: {
type: Boolean,
default: true
},
popperOptions: {
type: Object,
default() {
return {
gpuAcceleration: false
};
}
}
},
data() {
return {
showPopper: false,
currentPlacement: ''
};
},
watch: {
value: {
immediate: true,
handler(val) {
this.showPopper = val;
this.$emit('input', val);
}
},
showPopper(val) {
if (this.disabled) return;
val ? this.updatePopper() : this.destroyPopper();
this.$emit('input', val);
}
},
methods: {
createPopper() {
if (this.$isServer) return;
/**
* 获取冒泡所设置的位置。
* 'top','top-start','bottom','bottom-end'之类，和el-popover的placement一样
*/
this.currentPlacement = this.currentPlacement || this.placement;
if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement)) {
return;
}
// 关于popperOptions的详细配置可以看./popper.js中Popper构造函数中JSDoc对于options的注解
const options = this.popperOptions;
// 获取要被设置成冒泡出现效果的dom元素，例如被设置了(ref="popper")的元素
const popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper;
// 获取要被设置成基准点的dom元素，例如被设置了(ref="reference")的元素
let reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference;
if (!reference &&
this.$slots.reference &&
this.$slots.reference[0]) {
reference = this.referenceElm = this.$slots.reference[0].elm;
}
if (!popper || !reference) return;
if (this.visibleArrow) this.appendArrow(popper);
if (this.appendToBody) document.body.appendChild(this.popperElm);
// 如果popperJS已存在，所以先销毁之前创建的popperJS
if (this.popperJS && this.popperJS.destroy) {
this.popperJS.destroy();
}
options.placement = this.currentPlacement;
options.offset = this.offset;
options.arrowOffset = this.arrowOffset;
this.popperJS = new PopperJS(reference, popper, options);
this.popperJS.onCreate(_ => {
this.$emit('created', this);
// 重置transform-origin作为transform的基准位置
this.resetTransformOrigin();
// 在下一个更新帧中调用updatePopper函数
this.$nextTick(this.updatePopper);
});
if (typeof options.onUpdate === 'function') {
this.popperJS.onUpdate(options.onUpdate);
}
this.popperJS._popper.style.zIndex = PopupManager.nextZIndex();
this.popperElm.addEventListener('click', stop);
},
/**
* 更新Popper状态
* 该函数是vue-popper被外部引用且mixin后，被唯一调用的用作更新的函数，可以当作分析源码的入口
*
*/
updatePopper() {
const popperJS = this.popperJS;
// this.popperJS存在，故
if (popperJS) {
// 调用Popper实例内部更新函数更新状态，包括left，top的位置
popperJS.update();
/**
* _popper指的是冒泡DOM
* 若其存在，则从PopupManager中获取最新且最大值的z-index，赋值到其style['z-index']中
* 使冒泡Popper在更新位置呈现时永远处于最顶层
*/
if (popperJS._popper) {
popperJS._popper.style.zIndex = PopupManager.nextZIndex();
}
// this.popperJS为空时，Popper还没被创建，故调用createPopper函数
} else {
this.createPopper();
}
},
/**
* 销毁PopperJS函数
* @param {Boolean} forceDestroy
*/
doDestroy(forceDestroy) {
/* istanbul ignore if */
if (!this.popperJS || (this.showPopper && !forceDestroy)) return;
// 调用Popper实例中的销毁函数
this.popperJS.destroy();
this.popperJS = null;
},
destroyPopper() {
if (this.popperJS) {
this.resetTransformOrigin();
}
},
resetTransformOrigin() {
if (!this.transformOrigin) return;
let placementMap = {
top: 'bottom',
bottom: 'top',
left: 'right',
right: 'left'
};
let placement = this.popperJS._popper.getAttribute('x-placement').split('-')[0];
let origin = placementMap[placement];
this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string'
? this.transformOrigin
: ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;
},
appendArrow(element) {
let hash;
if (this.appended) {
return;
}
this.appended = true;
for (let item in element.attributes) {
if (/^_v-/.test(element.attributes[item].name)) {
hash = element.attributes[item].name;
break;
}
}
const arrow = document.createElement('div');
if (hash) {
arrow.setAttribute(hash, '');
}
arrow.setAttribute('x-arrow', '');
arrow.className = 'popper__arrow';
element.appendChild(arrow);
}
},
beforeDestroy() {
this.doDestroy(true);
if (this.popperElm && this.popperElm.parentNode === document.body) {
this.popperElm.removeEventListener('click', stop);
document.body.removeChild(this.popperElm);
}
},
// call destroy in keep-alive mode
deactivated() {
this.$options.beforeDestroy[0].call(this);
}
};
