Element UI中下拉选项选择框显示在body中代码部分解析

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中排出绝对定位等因素对控件显示的影响