用别人的组件总有各种不可控的问题,而且不好维护,还是造轮子比较舒畅。

下拉列表是工作中经常用到的一个功能,点击按钮,显示下拉列表,点击列表中的项目显示对应的值到按钮中,这是下拉列表的常用交互。这里的一个比较有意思的点就是如何在点击别的地方时关闭列表。我采用的方法是监听组件最外层的 blur 事件,当该组件失去焦点时,关闭列表。由于按钮用的是 div 实现,默认 div 是没有 blur 事件的,这里添加一个 tabindex 属性, blur 就有效了。

demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- html -->
<div class="dropDown-wrap" tabindex="1" @blur="hidden">
<div class="dropDown" @click="isDropDown=!isDropDown">
{{selected.name}}
<svg class="arrow-right" role="presentation" v-show="isIcon">
<polyline points="7,0 14,7 7,14" fill="none" stroke-width="2px" stroke="#fff" />
</svg>
</div>
<div class="arrow-up" :class="{isDropDown:isDropDown}"></div>
<div class="dropDown-list" :class="{isDropDown:isDropDown}">
<div
class="dropDown-item"
:class="{isSelected:selected.id===item.id}"
v-for="(item,index) in list"
:key="index"
@click="selectItem(item)"
>{{item.name}}</div>
</div>
</div>
1
2
3
4
5
6
7
selectItem (item) {
this.$emit('changeItem', item)
this.isDropDown = false
},
hidden () {
this.isDropDown = false
}

三、Demo 地址

Demo => 媒体 => 列表控件