vue点击按钮打开下拉菜单_手把手教你实现vue下拉菜单组件

这篇文章我们一起来实现一个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: