1.前提
本文不对具体实现原理做具体解析，仅简单说明如何使用该框架中的文件实现自己的功能
2.关联/依赖文件
1）主要文件
vue-popper.js
路径：element/src/utils/vue-popper.js
2）相关依赖
从代码上看还需要引入的文件
vue：需要引入vue
import Vue from 'vue';
const PopperJS = Vue.prototype.$isServer ? function() {} : require('./popper');
就一个地方用到了，使用了vue原形里面的$isServer判断是否运行在服务器上
popup-manager.js
路径：element/src/utils/popup/popup-manager.js
当然element引用的是:element/src/utils/popup/index.js，实际起作用的是popup-manager.js
dom.js
路径：element/src/utils/dom.js
其实element里面的公共js引用一环套一环，可以直接整个文件夹复制，里面的东西如果了解了是很有用的
3.使用
以带输入建议的input输入框为例
packages/autocomplete
引入依赖
import Popper from 'element-ui/src/utils/vue-popper';
主要属性showPopper，控件的显示与隐藏一定需要使用这个属性来控制
<template>
<transition name="el-zoom-in-top" @after-leave="doDestroy">
<div
v-show="showPopper"
class="el-autocomplete-suggestion el-popper"
:class="{ 'is-loading': !parent.hideLoading && parent.loading }"
:style="{ width: dropdownWidth }"
role="region">
<el-scrollbar
tag="ul"
wrap-class="el-autocomplete-suggestion__wrap"
view-class="el-autocomplete-suggestion__list">
<li v-if="!parent.hideLoading && parent.loading"><i class="el-icon-loading"></i></li>
<slot v-else>
</slot>
</el-scrollbar>
</div>
</transition>
</template>
需要定义好这两个属性popperElm，referenceElm
mounted() {
/*经过试验得出结论this.$parent.popperElm最好不要赋值，
如果你的外面是被el-tooltip控件包裹着，el-tooltip控件也用了这个，会替换掉他的赋值*/
//很明显，当前元素，主体部分，顺带父元素的也设置了
//很可惜父元素的没看到有使用
this.$parent.popperElm = this.popperElm = this.$el;
//这个也很明显，下拉提示信息肯定对应一个输出框，根据实际情况调整
this.referenceElm = this.$parent.$refs.input.$refs.input;
//以下方法属于当前控件 和现在说的功能没关系
this.referenceList = this.$el.querySelector('.el-autocomplete-suggestion__list');
this.referenceList.setAttribute('role', 'listbox');
this.referenceList.setAttribute('id', this.id);
},
最后改变显示与隐藏属性
//这个控件是用的这样的方法
created() {
this.$on('visible', (val, inputWidth) => {
this.dropdownWidth = inputWidth + 'px';
this.showPopper = val;
});
}
//在父元素的节点操作,更新显示与隐藏
this.broadcast('ElAutocompleteSuggestions', 'visible', [val, this.$refs.input.$refs.input.offsetWidth]);
在vue-popper.js中监听了showPopper属性，来更新界面的显示
watch: {
value: {
immediate: true,
handler(val) {
this.showPopper = val;
this.$emit('input', val);
}
},
//对showPopper属性进行监听
showPopper(val) {
if (this.disabled) {
return;
}
val ? this.updatePopper() : this.destroyPopper();
this.$emit('input', val);
}
},
再次强调--具体功能实现原理就不说了 就说到这 应该知道怎么用了
使用这个可以在做下拉选择框一类控件时简单控制控件的位置，将下拉属性放到body中排出绝对定位等因素对控件显示的影响
