关于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">
    <Input
      v-model="currentVersion"
      size="large"
      placeholder="请输入版本号x.y.z"
      style="width: 80%"
      @on-focus="isShow = true"
      @on-change="onChange"
      @on-blur="onBlur"
    ></Input>
    <div
      class="select"
      v-if="isShow"
      :style="`height:${menuHeight}`"
      @mouseenter="flag= true"
      @mouseleave="flag= false"
    >
      <div
        v-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 = val
      this.$emit('currentVersion', this.currentVersion)
      this.isShow = false
      this.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>