popper.js在生成弹窗的时候,
从click点击的元素,从内到body递归了一次,期间如果有父元素position=fixed,则生成的弹窗的position也=fixed
javascript
function isFixed(element) {
//如果当前递归的元素是body,则为absolute
if (element === root.document.body) {
return false;
}
//在这里判断当前递归的元素的position
if (getStyleComputedProperty(element, 'position') === 'fixed') {
debugger
return true;
}
//递归
return element.parentNode ? isFixed(element.parentNode) : element;
}
则生成的弹窗的position也=fixed,而不是absolute
javascript
Popper.prototype._getPosition = function (popper, reference) {
var container = getOffsetParent(reference);
if (this._options.forceAbsolute) {
return 'absolute';
}
// Decide if the popper will be fixed
// If the reference element is inside a fixed context, the popper will be fixed as well to allow them to scroll together
debugger
//如果一直递归到body,未发现有父元素的position为fixed,则为当前元素赋值为absolute
var isParentFixed = isFixed(reference, container);
return isParentFixed ? 'fixed' : 'absolute';
};
获取当前页面最上层z-index
javascript
引入PopupManager
import {
PopupManager
} from 'element-ui/src/utils/popup';
//调用
const ZIndex=PopupManager.nextZIndex();
获取dome的css属性值
javascript
/**
* Get CSS computed property of the given element
* @function
* @ignore
* @argument {Eement} element 比如body
* @argument {String} property 比如position
*/
function getStyleComputedProperty(element, property) {
// NOTE: 1 DOM access here
var css = window.getComputedStyle(element, null);
return css[property];
}
动态创建组件几步曲
javascript
//1 你要创建的组件
import FilterPanel from './filter-panel.vue';
//
import Popper from 'element-ui/src/utils/vue-popper';
//挂载
const filterPanel = new Vue(FilterPanel);
filterPanel.placement = column.filterPlacement; //挂载的位置比如,bottom
filterPanel.$mount(document.createElement('div')); //挂载