![978d5ea3c70d2cb1f627a461d19ad6c3.png](https://i-blog.csdnimg.cn/blog_migrate/9f7111982ba7d241ebcca1274b8cc70b.jpeg)
好了,现在将前面做好的下拉菜单和导航栏结合起来,
首先思考一下,哪个应该做容器呢?当然是导航栏,所以将下拉菜单的代码加到导航栏代码:
![3f924109b1f13db2828ab3b914f996e0.png](https://i-blog.csdnimg.cn/blog_migrate/474c2b91213cbe7e0975c438077b7cfc.png)
太吓人了是不是?
下拉菜单占据了那么大地方,这不是我们需要的效果,
在下拉出现的菜单栏的class中增加:
<
好了,各个元素都归位了。下面再思考,我们需要的效果是?
我们需要头像和导航栏原有项目和平共处,并且在点击时展示下拉菜单,
实现这个效果可以使用Vue中的v-if,在下拉菜单div里面加上:
v-if="isOpen"
并且在Vue的app中定义这个状态:
<
注意,如果是分开写的组件(推荐这样做,但本例没有),那么组件的data必须是一个函数!
下一步,要实现点击头像展示或者隐藏菜单栏:
在头像按钮button中加上:
@click="isOpen = !isOpen"
再来看看效果:
- 隐藏下拉菜单(默认状态)
![4c8e772b392162735e923068927a4527.png](https://i-blog.csdnimg.cn/blog_migrate/5319a6f1ffc7b28833913138275cbbbd.png)
- 展示下拉菜单
![6ef45977164d04795946102201be0c5d.png](https://i-blog.csdnimg.cn/blog_migrate/4e73fd54446b3fd12d38e144ca565596.png)
真不错嘿!
不过每次隐藏和展示,都要跑到右上角点击那小小的一片区域,不太方便,
我们想增加的效果是,点击头像展开,点击屏幕其他地方则隐藏。
监听点击动作,我们用另一个button来完成。
在原有头像下面增加button
<