vue+element-ui implementiert die Kopfnavigationsleistenkomponente

npm installiere Element-UI

<Vorlage>
  <div Klasse="Header">
    <div Klasse="img">
      <img src="@/assets/image/index/logo.png" alt="">
    </div>
    <el-Menü
      :default-active="dieser.$route.pfad"
      Klasse="el-menu-demo"
      Modus="horizontal"
      @select="Auswahlgriff"
      Router
      Hintergrundfarbe = "fff"
      Textfarbe = "#333"
      Aktiver Text-Color="#0084ff"
      Stil="flex:1"
    >
      <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
        <Vorlagenslot="Titel">
          <span> {{ item.navItem }}</span>
        </Vorlage>
      </el-Menüelement>
    </el-Menü>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
    Daten() {
    zurückkehren {
        Navigationsliste:[
            {name:'/home', navItem:'Home'},
            {name:'/home/classRoom',navItem:'Meine Klasse'},
            {name:'/home/course',navItem:'Mein Kurs'},
            {name:'/home/exam',navItem:'Prüfung erstellen'},
            {name:'/home/practice',navItem:'Praxis erstellen'},
        ]
                      
    }
  },
  Methoden: {
    handleSelect(Schlüssel, Schlüsselpfad) {
      }
  }
}
</Skript>

<Stil>
.el-menu-item{
  Schriftgröße: 18px !wichtig;
}
.el-menu-item.ist-aktiv {
    Farbe: #ea5b2c !wichtig;
    Schriftgröße: 18px !wichtig;
}
.el-menu--horizontal>.el-menu-item.is-active {
  Rahmen unten: 2px durchgezogen #ea5b2c !wichtig;
}
</Stil>
<style lang="scss" scoped>
.header {
  Anzeige: Flex;
  Breite: 100 %;
  .img {
    Hintergrund: #ffffff;
    Rahmen unten: durchgezogen 1px #e6e6e6;
    img {
      Höhe: 50px;
      Polsterung: 10px;
    }
  }
}
</Stil>