element源码解析(3) -- AutocompleteSuggestions

element源码解析(3) – AutocompleteSuggestions

template

<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>

三层dom结构,过渡动画transition,是否显示列表建议,滚动内容
1.transition
过渡名name为el-zoom-in-top,从顶部开始Y轴方向放大
默认透明度为0,大小为0
进入时恢复设置值

.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: $--md-fade-transition;
  transform-origin: center top;
}
.el-zoom-in-top-enter,
.el-zoom-in-top-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

2.是否显示建议列表
v-show=“showPopper”
3.溢出隐藏滚动条
加载加载状态或插槽

script

import

导入一个组件两个混入

  import Popper from 'element-ui/src/utils/vue-popper';
  import Emitter from 'element-ui/src/mixins/emitter';
  import ElScrollbar from 'element-ui/packages/scrollbar';

data

data() {
      return {
        parent: this.$parent,
        dropdownWidth: ''
      };
    },

parent 获取整个父组件

dropdownWidth 下拉列表宽度

props

两个属性,没太大用处

props: {
      options: {
        default() {
          return {
            gpuAcceleration: false
          };
        }
      },
      id: String
    },

生命周期

updated

监听更新钩子,调用混入popper方法

this.$nextTick(_ => {
        this.popperJS && this.updatePopper();
      });

mounted

当前dom元素赋给popperElm

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

根据父组件监听建议列表是否可见时,广播visible事件,获取当前val和下拉列表宽度,与父组件保持一致;

this.$on('visible', (val, inputWidth) => {
        this.dropdownWidth = inputWidth + 'px';
        this.showPopper = val;
      });

methods

父组件监听item-click,但没见这组件里面何处用到了

 select(item) {
        this.dispatch('ElAutocomplete', 'item-click', item);
      }