关于Input输入框添加下拉框(可输入、可选)
昨天,UI突然发过来一个设计图,可输入文本框加上可选择的下拉框,原本以为很简单的事情却在我翻看组件库的一次次崩溃中变得复杂。iview组件库中的Select框确实很像啊,但是,不能输入啊!!!!!!崩溃中。。。。突发奇想,组件都是原生代码编写的,为啥我不能基于vue2编写一个自己的组件呢,由于代码篇幅较大,所以我选择在components中创建新的vue文件(优点:够清晰;缺点:涉及父子组件的传值
昨天,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>
更多推荐
所有评论(0)