关于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">
<div class="selectInput">
<Input
v-model="currentVersion"
size="large"
placeholder="请输⼊版本号x.y.z"
@on-focus="isShow = true"
@on-change="onChange"
@on-blur="onBlur"
></Input>
<div
class="select"
v-if="isShow"
:
@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`
},
},input绑定onblur事件
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
},
},
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。