这篇文章我们一起来实现一个vue的下拉菜单组件。
像这种基本UI组件,网上已经有很多了,为什么要自己实现呢?其实并不是有意重复造轮子,而是想通过这个过程回顾一下vue组件开发的一些细节和注意事项。
为什么选择下拉菜单组件?
因为:麻雀虽小五脏俱全,这个小小的组件涉及到了不少vue组件开发的知识点。
好了,那就开始吧!
首先创建一个vue-cli的项目,笔者用的是vue-cli3,创建过程略,然后创建一个vue组件:DropDownList.vue
在编写模板之前,我们来分析一下这个组件的视图结构和功能。
下拉菜单组件应该由两部分组成:
选中项的文本
待选菜单(默认隐藏)
它的主要功能包括:
鼠标经过下拉菜单组件,显示待选菜单
鼠标滑出下拉菜单组件,隐藏待选菜单
鼠标点击待选菜单中的条目,选中项文本更新,组件派发change事件
我们编写如下这样的模板:
选中项的文本
- 北京
- 上海
- 广州
选中项文本右侧的i标签,用来实现下拉菜单的三角形图标,在下文的css中我们用背景图来实现。
我们给根元素div已经添加了鼠标经过和滑出的回调函数,具体实现见下文。
接下来我们为这个下拉菜单编写样式,在模板下方添加style标签,为了防止和其他组件的样式发生冲突,笔者建议大家在开发组件时,都给style加上scoped属性。另外,笔者在这里用到了scss,具体代码如下:
.zq-drop-list{
display: inline-block;
min-width: 100px;
position: relative;
span{
display: block;
height: 30px;
line-height: 30px;
background: #f1f1f1;
font-size: 14px;
text-align: center;
color: #333333;
border-radius: 4px;
i{
background: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) no-repeat center center;
margin-left: 6px;
display: inline-block;
}
}
ul{
position: absolute;
top: 30px;
left: 0;
width: 100%;
margin: 0;
padding: 0;
border: solid 1px #f1f1f1;
border-radius: 4px;
overflow: hidden;
li{
list-style: none;
height: