[Composant de la barre de navigation inférieure du package] Utilisez l'échafaudage vue-cli3 pour vous apprendre manuellement à encapsuler un composant de la barre de navigation inférieure

01 rendus

Cliquez pour accéder à la page cliquée et afficher la couleur

02 implémentation de code

1. Créez un nouveau fichier MyNav.vue sous le dossier des composants

2. Écrivez le code sous le fichier MyNav.vue

<template>
   <div class="nav">
    <div class="nav-item" :class="{select :name === 'Index'}" @click="to('Index')">
      <div class="icon">
        <i class="iconfont icon-eliaomo"></i>
      </div>
      <div class="take">主页</div>
    </div>

     <div class="nav-item" :class="{select :name === 'Announce'}" @click="to('Announce')">
      <div class="icon">
        <i class="iconfont icon-chaoshi"></i>
      </div>
      <div class="take">通告</div>
    </div>

    <div class="nav-item" :class="{select :name === 'Mine'}" @click="to('Mine')">
      <div class="icon">
        <i class="iconfont icon-wode"></i>
      </div>
      <div class="take">我的</div>
   </div>

 </div>
</template>

Tout d'abord, lorsque vous déclarez un itinéraire, chaque itinéraire a son propre nom, qui est le nom dans le
fichier MyNav.vue. Ici, ce nom est un attribut calculé
. Écrivez de cette façon, ce nom est le nom de votre itinéraire, puis jugez sur le html
si, nom C'est Index, je vais donner à cette famille une classe, c'est-à-dire, ajouter select.
Cette sélection correspond au style vert.

Remarque:

Si le même niveau de classe, ne pas l'espace
si elle est adaptée élément enfant de la classe, il est nécessaire , séparés par des espaces
c'est sélecteurs css
veut dire qu'il y sélectionner le correspondant élément de menu
peut être utilisé pour changer le style d'une autre classe mieux
est d'avance Maintenant, écrivez le css, puis modifiez la classe

<script>

// import MyNav from './components/nav.vue'
export default {
  computed: {
    name () {
      return this.$route.name
    }
  },
  methods: {
    to (name) {
      if (name === this.name) return false
      this.$router.replace({
        name
      })
    }
  }
}
</script>

Passer par valeur est par composant.
Voici enregistrer route
et écouter le changement d'url pour afficher différents composants.
Cette vue-router le fera par
vous-même. Il vous suffit de configurer les options de routes.

<style scoped>
.nav{
  position: fixed;
  /* margin: 10px; */
  bottom:0;
  height: 45px;
  display:flex;
  width: 100%;
  background:white;
  border-top:1px solid rgb(95, 93, 93);
}
.nav .nav-item{
  flex-grow: 1;
  color:rgb(155, 143, 143);
  display:flex;
  /* 垂直水平居中 */
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.nav .nav-item.select{
  color:rgb(74, 176, 235)
}

.nav .nav-item .icon .iconfont{
  font-size: 18px;
}
.nav .nav-item .take{
  font-size: 1px;
}
</style>

Remarque: L'icône Alibaba doit être introduite, et elle est introduite sous public / index.html

03 Introduisez-le et utilisez-le sur la page requise