关于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小时内删除。