查看源码的基本方法（oj）
1.下拉框主要功能实现
<el-select-menu
ref="popper"
:append-to-body="popperAppendToBody"
v-show="visible && emptyText !== false">
<el-scrollbar
tag="ul"
wrap-class="el-select-dropdown__wrap"
view-class="el-select-dropdown__list"
ref="scrollbar"
:class="{ 'is-empty': !allowCreate && query && filteredOptionsCount === 0 }"
v-show="options.length > 0 && !loading">
<el-option
:value="query"
created
v-if="showNewOption">
</el-option>
<slot></slot>
</el-scrollbar>
<template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))">
<slot name="empty" v-if="$slots.empty"></slot>
<p class="el-select-dropdown__empty" v-else>
{{ emptyText }}
</p>
</template>
</el-select-menu>
//其中：
name=“el-zoom-in-top”
//el-zoom实现下拉框出现以及消失时的动画效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TG8WDXGl-1649426594139)(C:\Users\摩尔庄园\Pictures\Saved Pictures\屏幕截图 2022-04-01 175417.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nBR41sED-1649426594140)(C:\Users\摩尔庄园\AppData\Roaming\Typora\typora-user-images\image-20220401175730766.png)]
$nextTick官方解释： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
所以handleMenuEnter大概效果是当this.scrollToOption(this.selected))的值变化时，执行这个nextTick这个写好的回调函数，使下拉框出现。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cygi4A1f-1649426594140)(C:\Users\摩尔庄园\Pictures\Saved Pictures\屏幕截图 2022-04-01 181039.png)]
ref 写在标签上时：this.$refs.名字 获取的是标签对应的dom元素，ref 写在组件上时：这时候获取到的是 子组件 的引用\
v-show=“options.length > 0 && !loading”
//options.length>0保证下拉框有东西可出现，!loading保证下拉框不在加载中出现，而是在加载完后出现
v-if=“showNewOption”
showNewOption() {
let hasExistingOption = this.options.filter(option => !option.created)
.some(option => option.currentLabel === this.query);
return this.filterable && this.allowCreate && this.query !== ‘’ && !hasExistingOption;
},
//表示在option.currentLabel 中存在与 this.query相等的值时，下拉框中出现与搜索值相匹配的值，
用于可搜索下拉框。
2.鼠标移入移出下拉框分别出现叉和下三角主要功能实现
@mouseenter.native="inputHovering = true"
@mouseleave.native="inputHovering = false">
//主要是这两个语句
inputHovering：
showClose() {
let hasValue = this.multiple4
? Array.isArray(this.value) && this.value.length > 0
: this.value !== undefined && this.value !== null && this.value !== '';
let criteria = this.clearable &&
!this.selectDisabled &&
this.inputHovering &&
hasValue;
return criteria;
},
//首先把可多选multiple赋值给hasvalue再进行三目运算，
有值返回Array.isArray(this.value)&& this.value.length > 0
无值返回this.value !== undefined && this.value !== null && this.value !== ''
再令criteria等于clearable，即可清除的
!this.selectDisabled，表示非禁用状态
this.inputHovering ，表示鼠标正在下拉框上
hasValue，表示下拉框里有值
以上条件都满足的话就显示叉，不满足的话显示下三角
@mouseenter.native="inputHovering = true"
@mouseleave.native="inputHovering = false"
而鼠标移入移出的判断初始值相反，判断条件相同，所以两个动作总显示不同的图标
3.实现下三角的旋转
iconClass() {
return this.remote && this.filterable ? '' : (this.visible ? 'arrow-up is-reverse' : 'arrow-up');
},
//主要的实现
//this.visible ? 'arrow-up is-reverse' : 'arrow-up'
一个三目运算，如果visible为真，即下拉框中有值，返回arrow-up is-reverse，
is reverse是写好的语句，实现的功能是将arrow-up旋转，在浏览器的元素中可见
如果visible为假，下三角不变
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XNtbmubG-1649426594140)(C:\Users\摩尔庄园\Pictures\Saved Pictures\屏幕截图 2022-04-01 194146.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0MoX7Seo-1649426594141)(C:\Users\摩尔庄园\Pictures\Saved Pictures\QQ图片20220401194733.png)]
控制台的截图，点击下三角is-reverse生效，div的style发生改变。
关于.antive
他是监听组件根元素的原生事件，即给自定义的组件添加原生事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4KIokhGu-1649426594141)(file:///C:/Users/%E6%91%A9%E5%B0%94%E5%BA%84%E5%9B%AD/Pictures/Saved%20Pictures/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202022-04-01%20195510.png)]
在中.native不生效，clickfn事件不会触发，以为不是自定义的标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bZmqPFmF-1649426594141)(C:\Users\摩尔庄园\Pictures\Saved Pictures\屏幕截图 2022-04-01 195904.png)]
这样就可以触发了，因为标签是你自定义的
用法：
<自定义的组件标签 @click.native=‘事件名’>
小结：
1.ctrl + p搜索文件名
2.ctrl + f 搜索你想要的函数
3.找到函数后ctrl + 左击进入想查询的数据
4.不要过于纠结变量名和非必要语句，弄清楚函数的大概逻辑和触发条件