electron增加导航按钮_TailwindCSS 学习总结-导航与弹出菜单结合

好了，现在将前面做好的下拉菜单和导航栏结合起来，

首先思考一下，哪个应该做容器呢？当然是导航栏，所以将下拉菜单的代码加到导航栏代码：

太吓人了是不是？

下拉菜单占据了那么大地方，这不是我们需要的效果，

在下拉出现的菜单栏的class中增加：

<

好了，各个元素都归位了。下面再思考，我们需要的效果是？

我们需要头像和导航栏原有项目和平共处，并且在点击时展示下拉菜单，

实现这个效果可以使用Vue中的v-if，在下拉菜单div里面加上：

v-if="isOpen"

并且在Vue的app中定义这个状态：

<

注意，如果是分开写的组件（推荐这样做，但本例没有），那么组件的data必须是一个函数！

下一步，要实现点击头像展示或者隐藏菜单栏：

在头像按钮button中加上：

@click="isOpen = !isOpen"

再来看看效果：

• 隐藏下拉菜单（默认状态）

• 展示下拉菜单

真不错嘿！

不过每次隐藏和展示，都要跑到右上角点击那小小的一片区域，不太方便，

我们想增加的效果是，点击头像展开，点击屏幕其他地方则隐藏。

监听点击动作，我们用另一个button来完成。

在原有头像下面增加button

<