组件实战（一）——导航栏设计

简介

常见导航栏的设计与封装，以及一些知识点的记录。为了避免组件太细不好管理，这里的导航栏包括了logo以及导航菜单等等。

功能详解

1. 导航栏是黏性的，也就是拖动到下方时，导航栏会fix在顶部。
2. 其次，导航栏是自适应的，当界面不适合时会折叠，靠按钮展开。

效果

固定时，折叠与未折叠

非固定时，折叠与未折叠

展开时：

代码

<template>
  <header :class="header_classList">
    <div class="logo" >{
  {prop_data.logo_text}}</div>
    <nav>
      <a v-for="(value, key, index) in prop_data.nav_link" :href="value">{
  {key}}</a&