- 这次需求里面需要自定义下拉选择框，所以自己用vue写了个下拉选择框。
- 开发过程中主要解决的是点击其他空白地方，下拉框隐藏。 点击当前下拉框，其他下拉框隐藏
image.png
image.png
- 封装的组件 我设置接收 左边显示label名，placeholder内容，以及默认显示文本。然后就是下拉列表监听选择事件
父组件
<div class="line">
<MySelect
label="身份:"
:defTxt="indentity"
placeholder="请选择身份"
:list="identityList"
@chooseFn="chooseIdentityFn"
/>
</div>
<div class="line">
<MySelect
label="院校地区:"
:defTxt="area"
placeholder="请选择地区"
:list="areaList"
@chooseFn="chooseAreaFn"
/>
</div>
<div
class="line"
v-if="indentityId !== 3"
>
<MySelect
label="就读院校:"
:defTxt="school"
placeholder="请选择院校"
:list="schoolList"
@chooseFn="chooseSchoolFn"
/>
</div>
关于点击空白地方，隐藏下拉框。我在mounted之后document监听了click事件，因为组件上我都有一个私有的类名“_r_select_my_use”.所以通过类名可以判断是否是点击的组件。 在 beforeDestory的时候移除监听。
在点击当前组件的时候，隐藏其他组件的下拉框。我用到了一个全局的计数器 _active_select_index。 每次点击组件的时候，全局计数器加1 并赋值给当前组件。 然后点击事件冒泡到document上的委托绑定click事件，判断当前组件的计数器与全局计数器是不是一样，如果不一样证明不是当前组件，关闭下拉框
子组件
<template>
<div
class="select-box _r_select_my_use"
@click="activeFn"
>
<div class="label _r_select_my_use">{{label}}</div>
<div
class="select-right _r_select_my_use"
:class="[active? 'active': '', txt ? '': 'gray']"
>{{txt ? txt : placeholder}}</div>
<div
class="list _r_select_my_use"
v-if="active"
>
<div
class="select-part _r_select_my_use"
v-for="(item,index) in list"
:key="index"
@click="chooseFn(item)"
>{{item.value}}</div>
</div>
</div>
</template>
<script>
let _active_select_index = 0 // 全局计数器，所有组件都用。 点击+1， 最高的是当前组件。其他组件关闭弹窗
export default {
name: 'my-select',
props: ['label', 'list', 'defTxt', 'placeholder'],
components: {},
data() {
return {
txt: this.defTxt || null,
active: false, // 弹窗是否展示
active_select_index: 0, // 当前组件计数器
eventFn: e => {
const className = e.target.className
// 如果不是最高层级的组件 关闭弹窗
if (this.active_select_index !== _active_select_index) {
this.active = false
}
// 如果有_r_select_my_use类名 点击的不是该组件 需要关闭弹窗
if (className.indexOf('_r_select_my_use') === -1) {
this.active = false
}
}
}
},
computed: {},
created() {},
mounted() {
document.addEventListener('click', this.eventFn)
},
beforeDestroy() {
document.removeEventListener('click', this.eventFn)
},
methods: {
activeFn() {
// 点击组件 弹窗显示隐藏
this.active = !this.active
// 全局计数器+1
_active_select_index += 1
// 当前组件计数器 赋值
this.active_select_index = _active_select_index
},
chooseFn(obj) {
this.txt = obj.value
this.$emit('chooseFn', obj)
}
}
}
</script>
<style lang="scss" scoped>
.select-box {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.select-right {
position: relative;
padding-right: 50px;
cursor: pointer;
&::after {
content: '';
position: absolute;
width: 34px;
height: 34px;
right: 0;
top: -5px;
background: url(~assets/img/icon-up.png) center/100% no-repeat;
}
&.active::after {
background: url(~assets/img/icon-down.png) center/100% no-repeat;
}
&.gray {
color: #a8a8a8;
}
}
.list {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
max-height: 200px;
transform: translateY(100%);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
overflow-y: auto;
z-index: 9;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
.select-part {
height: 67px;
line-height: 67px;
text-align: center;
background-color: #f9f9f9;
color: #434343;
font-size: 16px;
&:hover {
background-color: #fff;
}
}
}
}
</style>
