这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

从掘金看导航栏

导航。导航！导航？

既然上一章的List列表文章中看了一波掘金的列表，那么这章就继续从掘金的列表来分析一下吧。

其实最主要的原因是，布局组件如果不针对某个业务去开发，基本都是提供一个基本骨架，再由使用者根据需求修改。

那么如果我们这时候有了一个业务需求，再去针对性的开发一个组件呢？

基于这个模拟需求，所以就以掘金为例，改一个组件出来吧。

先看一下"需求"

既然说以掘金为模板，搞一波导航栏组件，那么肯定是先看一看掘金的导航栏是个什么样子的对吧。

大家可以打开一个掘金首页，或者接着往下看，会详细分析。

这里有几个值得需要关注的地方。

子级菜单

首页看到首页，从上往下分别是有三大菜单， 最上面的一级菜单决定看到的界面。

首页二级菜单，决定了展示某个大方向的文章。

最下面的三级菜单决定了某个细分类。

当然，展示什么内容，并不需要我们去关系，那么开发者需要做的事。

在开发组件的时候，我们关心的是，应该怎么把它组件化。

这样的导航栏还是挺简单的，主要是控制二级三级菜单的显示隐藏。以及需要处理好嵌套问题

那么如果， 再结合活动界面的下拉菜单呢？

也不难，这一块其实不需要在组件中去处理，让开发者去处理就好了。 毕竟组件不需要完全考虑所有情况对吧

听懂掌声。

盘它！

掘金的导航栏还是简单的啊， 既然如此，那就直接开盘了。

上一章的List列表组件从列表项开始从下往上分析， 那么这次的导航栏就从上往下搞一波。

先说说顶级的父层结构。

父层结构其实比较简单，说到底， 二级菜单，三级菜单其实都是一个导航栏，只是一级菜单控制了二级是否显示，二级控制三级，以此类推。

block content
ul.yx-menu(
  :class="`yx-menu`"
)
  slot

导航栏的每一项也只是从父级的ul换成li，多个点击事件，以及激活的样式，就不一一写出来了。

如果是常规的一二级的菜单，肯定是要有一个组来包裹子级的。掘金的导航栏没有，但还是写一下子项组的结构，常见的导航栏还是需要的。

block content
li.yx-submenu(
  :class="'is-active': isActive"
  @click="handleClick"
)
  div.yx-menu-title  // 组名
    slot(name="title")
    yx-icons(
      type="arrow-down" 
      :class="{'is-active': isActive}"
    )
  transition(
    name="scaleY" 
    ref="trigger" 
    v-if="horizontal"
  )
    ul.yx-menu(v-show="isActive") // 该组下的子级导航栏
      slot

下拉菜单的部分可以写在组件中，通过一个参数或者判断$slots.dropdown是否存在来控制，但是还是建议不要去做这个， 这部分在开发的时候去处理更合适。 除非在项目中使用比较频繁。

至于导航栏的逻辑部分，因为导航栏组件的逻辑部分基本是交给开发时的，组件中只是传递一下点击事件，来控制当前项的isActive状态。所以按下不表。

最后

基本零逻辑的组件就写到这里了， 接下来就开始慢慢深入到逻辑比较多的布局组件了， 希望如果有想看的组件可以评论留下足迹。 我可以适当调整顺序出文章。