关于Input输入框添加下拉框（可输入 可选）

昨天，UI突然发过来一个设计图，可输入文本框加上可选择的下拉框，原本以为很简单的事情却在我翻看组件库的一次次崩溃中变得复杂。

iview组件库中的Select框确实很像啊，但是，不能输入啊！！！！！！崩溃中。。。。

突发奇想，组件都是原生代码编写的，为啥我不能基于vue2编写一个自己的组件呢，由于代码篇幅较大，所以我选择在components中创建新的vue文件（优点：够清晰；缺点：涉及父子组件的传值问题）

既然要自己写组件，那么首先就是样式问题，一个大的div中嵌套一个Input标签及div(自写的下拉框)

绝对定位+z-index实现下拉框的基本样式，但是如果下拉框中的内容比较多，就会覆盖整个屏幕，需要限制高度，并设置overflow：auto;超出高度限制的时候浏览器就会自动生成滑块

我是这样处理的，在computed里面计算，超出时设置为150（大概五项的高度）

那么，下拉框什么时候显示呢？Input获得焦点时，同时需要将数据传递给父组件（父组件中也许会有非空验证）；既然获得焦点时显示下拉框，那么失去焦点是不是应该不显示呢，NONONO，因为下拉框本来也不是Input的元素啊，所以就会出现一个情况，刚想要点击下拉框的内容，就已经消失不见，，，，，，所以，我突然想到，为啥不设置个flag，看鼠标是不是想要点击下拉框呢

在data中设置flag为false，鼠标经过下拉框时设置为true，移出时设置为false,失去焦点时将下拉框的控制元素与falg相等

你以为显示问题到现在就结束了吗，NONONO，因为每个人操作状态千奇百怪，如果点击下拉框并填充数值之后,删除之后再点击别处，发现下拉框竟然神奇般的打开了，瞬间崩溃。。。。

百度之后发现竟然是因为子元素会触发父元素的mouseout事件，好家伙，事情越来越复杂了，最后按照网络的方法改为mouseenter和mouseleave，再进去时错误竟然还在，，，，这究竟是怎么回事？？？原来是我设置了点击之后就关闭下拉框，就不存在mouseleave，导致下拉框的控制元素一直为true，所以得在点击选中之后添加一个flag=false

接下来就是赋值啦，因为就一个框，所以只要一个值就行，在data中定义一个新的变量，点击下拉框中某项时赋值，并将值传递给父组件

，附上最后效果

完整代码如下：

<template><div class="selectInput"><Inputv-model="currentVersion"size="large"placeholder="请输入版本号x.y.z"style="width: 80%"@on-focus="isShow = true"@on-change="onChange"@on-blur="onBlur"></Input><divclass="select"v-if="isShow":style="`height:${menuHeight}`"@mouseenter="flag= true"@mouseleave="flag= false"><divv-for="(version, index) in versionList":key="index"@click.stop="onClick(version)">{{ version }}</div></div></div></template><script>export default {name: 'SelectInput',props: {versionList: {type: Array,},},data() {return {isShow: false,currentVersion: '',flag: false}},computed: {// 下拉框的高度menuHeight() {return this.versionList.length * 50 > 150? 150 + 'px': `${this.versionList.length * 50}px`},},methods: {onClick(val) {this.currentVersion = valthis.$emit('currentVersion', this.currentVersion)this.isShow = falsethis.flag = false},onChange() {this.$emit('currentVersion', this.currentVersion)this.isShow = false},onBlur() {this.isShow = this.flag},},}</script><style lang="scss" scoped>.selectInput {position: relative;.select {width: 80%;position: absolute;background: #fff;z-index: 99999;overflow: auto;left: 77px;cursor: pointer;border:1px solid #ccc;padding: 0 10px;}}</style>