Implementierungsmethode für die Kapselung von Vue3-Navigationsleistenkomponenten

<Vorlage>
  <header class="app-header">
    <div Klasse="Container">
      <!-- Kopfzeilennavigationsbereich -->
      <HeaderNavCommon />
      <div Klasse="Suche">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="Suche" />
      </div>
      <div Klasse="Warenkorb">
        <a href="#" Klasse="aktuell">
          <i class="iconfont icon-cart"></i>
          <em>2</em>
        </a>
      </div>
    </div>
  </header>
</Vorlage>
 
<Skript>
HeaderNavCommon aus '@/components/header-nav-common.vue' importieren
Standard exportieren {
  Name: "AppHeader",
  Komponenten:
    HeaderNavCommon
  }
}
</Skript>
 
<style scoped lang="weniger">
.app-header {
  Hintergrund: #fff;
  .container {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
  }
  .navs {
    Breite: 820px;
    Anzeige: Flex;
    Inhalt ausrichten: Abstand herum;
    Polsterung links: 40px;
    li {
      Rand rechts: 40px;
      Breite: 38px;
      Textausrichtung: zentriert;
      A {
        Anzeige: Inline-Block;
        Schriftgröße: 16px;
        Zeilenhöhe: 32px;
        Höhe: 32px;
      }
      &:schweben {
        A {
          Farbe: @xtxColor;
          Rahmen unten: 1px durchgezogen @xtxColor;
        }
      }
    }
  }
  .suchen {
    Breite: 170px;
    Höhe: 32px;
    Position: relativ;
    Rahmen unten: 1px durchgezogen #e7e7e7;
    Zeilenhöhe: 32px;
    .icon-suche {
      Schriftgröße: 18px;
      Rand links: 5px;
    }
    Eingabe {
      Breite: 140px;
      Polsterung links: 5px;
      Farbe: #666;
    }
  }
  .Warenkorb {
    Breite: 50px;
    .aktuell {
      Höhe: 32px;
      Zeilenhöhe: 32px;
      Textausrichtung: zentriert;
      Position: relativ;
      Anzeige: Block;
      .icon-wagen {
        Schriftgröße: 22px;
      }
      em {
        Schriftstil: normal;
        Position: absolut;
        rechts: 0;
        oben: 0;
        Polsterung: 1px 6px;
        Zeilenhöhe: 1;
        Hintergrund: @helpColor;
        Farbe: #fff;
        Schriftgröße: 12px;
        Rahmenradius: 10px;
        Schriftfamilie: Arial;
      }
    }
  }
}
</Stil>

<Vorlage>
  <ul Klasse="App-Header-Navigation">
    <li class="home"><RouterLink zu="/">Zuhause</RouterLink></li>
    <li><a href="#" >Köstliches Essen</a></li>
    <li><a href="#" >Küche</a></li>
    <li><a href="#" >Kunst</a></li>
    <li><a href="#" >Elektrogeräte</a></li>
    <li><a href="#" >Startseite</a></li>
    <li><a href="#" >Pflege</a></li>
    <li><a href="#" >Schwangerschaft und Säugling</a></li>
    <li><a href="#" >Kleidung</a></li>
    <li><a href="#" >Lebensmittel</a></li>
  </ul>
</Vorlage>
 
<Skript>
 Standard exportieren {
    Name: "AppHeaderNav"
   }
</Skript>
 
<Stil scoped lang='less'>
.app-header-nav {
    Breite: 820px;
    Anzeige: Flex;
    Polsterung links: 40px;
    Position: relativ;
    Z-Index: 998;
  li {
    Rand rechts: 40px;
    Breite: 38px;
    Textausrichtung: zentriert;
  A {
    Schriftgröße: 16px;
    Zeilenhöhe: 32px;
    Höhe: 32px;
    Anzeige: Inline-Block;
   }
  &:schweben {
    A {
    Farbe: @xtxColor;
    Rahmen unten: 1px durchgezogen @xtxColor;
        }
      }
  }
}
</Stil>

<Vorlage>
  <div class="app-header-sticky" :class="{ anzeigen: oben >= 78 }">
    <div Klasse="Container" v-if="oben >= 78">
      <!-- Mitte -->
      <HeaderNavCommon />
      <!-- Rechte Taste -->
      <div Klasse="rechts">
        <RouterLink to="/">Marke</RouterLink>
        <RouterLink to="/">Thema</RouterLink>
      </div>
    </div>
  </div>
</Vorlage>
 
<Skript>
HeaderNavCommon aus '@/components/header-nav-common.vue' importieren
// importiere { ref } von 'vue'
importiere { useWindowScroll } von '@vueuse/core'
Standard exportieren {
  Name: "AppHeaderSticky",
  Komponenten: { HeaderNavCommon },
  aufstellen() {
    // Seiten-Scrolldistanz // const top = ref(0)
    // fenster.onscroll = () => {
    // top.Wert = Dokument.documentElement.scrollTop
    // }
    // Seiten-Scrollen mit Drittanbieter-Paketen const { y: top } = useWindowScroll()
    zurück { nach oben }
  }
}
</Skript>
 
<style scoped lang="weniger">
.app-header-sticky {
  Breite: 100 %;
  Höhe: 80px;
  Position: fest;
  links: 0;
  oben: 0;
  Z-Index: 999;
  Hintergrundfarbe: #fff;
  Rahmen unten: 1px durchgezogen #e4e4e4;
  // Das ist der Schlüsselstil!!!
  // Bewegen Sie sich standardmäßig ganz nach oben transform: translateY(-100%);
  // Vollständig transparent Opazität: 0;
  //Angezeigter Klassenname&.show {
    Übergang: alle 0,3 s linear;
    transformieren: keine;
    Deckkraft: 1;
  }
  .container {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
  }
  .Rechts {
    Breite: 220px;
    Anzeige: Flex;
    Textausrichtung: zentriert;
    Polsterung links: 40px;
    Rahmen links: 2px durchgezogen @xtxColor;
    A {
      Breite: 38px;
      Rand rechts: 40px;
      Schriftgröße: 16px;
      Zeilenhöhe: 1;
      &:schweben {
        Farbe: @xtxColor;
      }
    }
  }
}
</Stil>