EL-select
作用：下拉选择
效果：
由于select有多个功能，我们先从它最基本的功能开始。
功能一：下拉单选
Props就传了个value和placeholder
源码部分：
咱们从数据流看起
当我们点击最外层div时 会调用开关函数将visible设置为true or false
我们来看看这个option数组的值是怎么来的
他这个option的赋值并没有在它组件本身处赋值 而是在子组件el-option的create方法中
然后看看初始值是如何显示在Input的
先得看看子组件 也就是select的选项option
结构：
可以看到el-option最终是被渲染成li
看看它的点击事件
我们看看父组件这个handleOptionClick
那input的值是什么时候改变的呢？
当我们选择可视范围外的选项时 容器又是如何让选项显示在可视范围的呢？
原理 找到点击的item dom元素 在容器的位置 通过offersetTop+offersetheight 与scrollTop和clientHeight进行比较 然后重新设置滚动条的位置(scrollTop)
重新计算了scrollTop之后 又因为scrollbar组件的滚动条是自己定义的 因此还需要调用handleScroll去调整自定义滚动条的样式 位置 具体待会再看
这里需要涉及到另一个组件el-scrollBar
这里看看 滚动条宽度怎么计算的
scrollbarWidth
再看看自定义滚动条是怎样的
让我们看看滚动槽的点击事件clickTrackHandler 主要是位置的计算
再看看滚动条的点击事件（这里注意 滚动条涉及到拖动事件及距离比例转换）
clickThumbHandler
键盘上下键是如何控制选项变动的呢？
首先 我们清楚思路一定是给个标记 当前标记==optionItem的index时我们就让这个Item带上hover的样式就可以了
子组件created()
这可以说相当于父组件直接调用子组件的属性了
可以这数据流还是比较乱的
这里有个很好的防御性代码写法
如果this.elForm为null 直接.disabled是会报
Uncaught TypeError: Cannot read properties of null
但是如果是{}.disabled是undefined 会转成false
其实这个跟this.elForm?.disabled是一样的
El-select多选时tag是如何跟input显示在一起的？同时他们高度又是如何控制的呢？
很多人一开始会以为这些tag是input的内容，其实不是的，从dom结构我们可以清楚的看到tag容器和input是单独，因为input不可能会放得了元素节点 因此这里是使用定位来实现效果，也是一种障眼法
计算高度
处理逻辑
这里还有一个自定义指令值得关注
我们点非select区域时 会关闭menu 这是怎么做到的呢？
