nuxt 项目实战之顶部导航菜单组件开发

nuxt.js 项目开发 - 顶部导航菜单组件开发

导读

1. 首先我们来分析下，最终案例的导航栏，这是一个移动端展示形式的顶部导航栏，这个导航菜单，采用的是bootstrapVue css ui 组件库
   里面的navbar组件

2. 我们需要单独创建一个菜单组件，并且把这个菜单组件放置在，公共的 layout 组件内部，接下来我们来制作菜单导航

3. 我们需要在components目录中新建目录AppHeader，再接着在AppHeader 目录中新建一个index.vue文件，我们在这个
   index.vue文件中新建我们的菜单导航，编写基本的vue单文件组件的基本结构：

<template>
    <div class="AppHeader">
        
    div>
template>

<script>
    export default {
        name: 'AppHeader'
    }
script>

<style scoped>
    
style>

接下来，我们就来编写bootstapVue导航组件代码，

<b-navbar toggleable="lg" type="dark" variant="info">
    
b-navbar>

• toggleable：toggleable属性值是字符串或者布尔值，字符串默认有四个值，分别是sm，md，lg和xl；如果我们设置toggleable的值为true（或空字符串）将设置导航栏始终折叠，而将其设置为 false（默认值）将禁用折叠（始终展开）。
• type：字符串，type属性的作用是控制导航栏的字体颜色，它有两个值，一个 dark，另外一个是light，默认值是light，我们来分别设置下，看一下效果
• variant：字符串，主要是用于颜色，背景风格的切换，默认有一下几个值 primary，success， info，warning，danger，dark，或light。我们来分别设置下，来感受下是否有对应颜色的变化；好，我们从primary开始，我们把这个属性值替换一下

然后我们继续编写我们的logo 也可以叫做 title ，如何快速实现这样一个类似于logo 标题的这样一个效果呢？

我们可以使用b-navbar-brand这样一个组件，这个组件适用于产品应用的标题名称，好，我们来编写一下，首先我们先写一下注释，把我们的logo标题放在组建标签中，这个组件有一个href属性，我们可以让它跳转到我们的首页

<b-navbar-brand href="/">
    Damiao Jokes
b-navbar-brand>

好，我们来看下效果，这样呢，在左上角就出现了一个 Damiao Jokes 的 logo 标题；

接下来，我们就需要来实现这个可折叠的导航菜单列表，菜单列表我们可以使用这样一个组件实现我们的效果，这个组建标签适用于响应式且轻量级的导航（当然以及包括对下拉菜单的支持）。

写完之后，接下来我们需要编写我们需要点击跳转的每个链接，这些链接的跳转，我们可以使用组建标签来代替，他有一个hef属性，可以用于路由或者链接跳转；接下来我们来分别设置下href，首页我们直接设置成 ‘/’ ，jokes 页面我们设置成 /jokes , about 页面 我们设置为 /about ，接下来我们来看下具体的效果；

这个链接效果已经出来了，接下来我们就需要新增一个可折叠按钮，我们可以使用这样一个折叠按钮，他有一个属性target， 可以绑定对应菜单链接包裹组件的元素ID，然后对 对应的菜单列表做折叠操作；好，我们把我们的菜单组件包裹起来，给他设置一个id，jokes-collapse，把我们的效果基本展示出现了

<template>
  <div>
    
    <b-navbar toggleable="lg" type="dark" variant="info">
      
      
      <b-navbar-brand href="#">Damiao Jokesb-navbar-brand>
      
      
      <b-navbar-toggle target="nav-collapse">b-navbar-toggle>
      
      
      

        <b-navbar-nav>
          <b-nav-item href="/">Homeb-nav-item>
          <b-nav-item href="/jokes">Jokesb-nav-item>
          <b-nav-item href="/about">Aboutb-nav-item>
        b-navbar-nav>

        
        

      
    b-navbar>

  div>
template>