Skip to content
本页目录

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')); //挂载