Vue3ナビゲーションバーコンポーネントのカプセル化実装方法

<テンプレート>
  <ヘッダークラ​​ス="アプリヘッダー">
    <div class="コンテナ">
      <!-- ヘッダーナビゲーション領域 -->
      <ヘッダーナビゲーション共通 />
      <div class="検索">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="検索" />
      </div>
      <div class="カート">
        <a href="#" class="curr">
          <i class="iconfont icon-cart"></i>
          2
        </a>
      </div>
    </div>
  </ヘッダー>
</テンプレート>
 
<スクリプト>
'@/components/header-nav-common.vue' から HeaderNavCommon をインポートします。
エクスポートデフォルト{
  名前: 'AppHeader',
  コンポーネント:
    ヘッダーナビゲーション共通
  }
}
</スクリプト>
 
<style スコープ lang="less">
.app-header {
  背景: #fff;
  。容器 {
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
  }
  .navs{
    幅: 820ピクセル;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースを空ける;
    左パディング: 40px;
    li {
      右マージン: 40px;
      幅: 38px;
      テキスト配置: 中央;
      {
        表示: インラインブロック;
        フォントサイズ: 16px;
        行の高さ: 32px;
        高さ: 32px;
      }
      &:ホバー{
        {
          色: @xtxColor;
          下部境界線: 1px 実線 @xtxColor;
        }
      }
    }
  }
  。検索 {
    幅: 170ピクセル;
    高さ: 32px;
    位置: 相対的;
    下境界線: 1px 実線 #e7e7e7;
    行の高さ: 32px;
    .アイコン検索{
      フォントサイズ: 18px;
      左マージン: 5px;
    }
    入力{
      幅: 140ピクセル;
      左パディング: 5px;
      色: #666;
    }
  }
  .カート{
    幅: 50px;
    .curr {
      高さ: 32px;
      行の高さ: 32px;
      テキスト配置: 中央;
      位置: 相対的;
      表示: ブロック;
      .icon-cart {
        フォントサイズ: 22px;
      }
      えむ {
        フォントスタイル: 通常;
        位置: 絶対;
        右: 0;
        上: 0;
        パディング: 1px 6px;
        行の高さ: 1;
        背景: @helpColor;
        色: #fff;
        フォントサイズ: 12px;
        境界線の半径: 10px;
        フォントファミリ: Arial;
      }
    }
  }
}
</スタイル>

<テンプレート>
  <ul class="app-header-nav">
    <li class="home"><RouterLink to="/">ホーム</RouterLink></li>
    <li><a href="#" >おいしい食べ物</a></li>
    <li><a href="#" >キッチン</a></li>
    <li><a href="#" >アート</a></li>
    <li><a href="#" >電化製品</a></li>
    <li><a href="#" >ホーム</a></li>
    <li><a href="#" >ケア</a></li>
    <li><a href="#" >妊娠と乳児</a></li>
    <li><a href="#" >衣類</a></li>
    <li><a href="#" >食料品</a></li>
  </ul>
</テンプレート>
 
<スクリプト>
 エクスポートデフォルト{
    名前: 'AppHeaderNav'
   }
</スクリプト>
 
<スタイル スコープ lang='less'>
.app-header-nav {
    幅: 820ピクセル;
    ディスプレイ: フレックス;
    左パディング: 40px;
    位置: 相対的;
    zインデックス: 998;
  li {
    右マージン: 40px;
    幅: 38px;
    テキスト配置: 中央;
  {
    フォントサイズ: 16px;
    行の高さ: 32px;
    高さ: 32px;
    表示: インラインブロック;
   }
  &:ホバー{
    {
    色: @xtxColor;
    下部境界線: 1px 実線 @xtxColor;
        }
      }
  }
}
</スタイル>

<テンプレート>
  <div class="app-header-sticky" :class="{ show: top >= 78 }">
    <div class="コンテナ" v-if="トップ >= 78">
      <!-- 中間 -->
      <ヘッダーナビゲーション共通 />
      <!-- 右ボタン -->
      <div class="right">
        <RouterLink to="/">ブランド</RouterLink>
        <RouterLink to="/">トピック</RouterLink>
      </div>
    </div>
  </div>
</テンプレート>
 
<スクリプト>
'@/components/header-nav-common.vue' から HeaderNavCommon をインポートします。
// 'vue' から { ref } をインポートします
'@vueuse/core' から { useWindowScroll } をインポートします。
エクスポートデフォルト{
  名前: 'AppHeaderSticky',
  コンポーネント: { HeaderNavCommon },
  設定（） {
    // ページスクロール距離 // const top = ref(0)
    // window.onscroll = () => {
    // top.value = document.documentElement.scrollTop
    // }
    // サードパーティのパッケージを使用したページスクロール const { y: top } = useWindowScroll()
    戻る {トップ}
  }
}
</スクリプト>
 
<style スコープ lang="less">
.app-header-sticky {
  幅: 100%;
  高さ: 80px;
  位置: 固定;
  左: 0;
  上: 0;
  zインデックス: 999;
  背景色: #fff;
  下境界線: 1px 実線 #e4e4e4;
  // これがキースタイルです!!!
  // デフォルトでは、完全に上に移動します。transform: translateY(-100%);
  // 完全に透明 opacity: 0;
  //表示されるクラス名&.show {
    遷移: すべて 0.3 秒線形。
    変換: なし;
    不透明度: 1;
  }
  。容器 {
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
  }
  。右 {
    幅: 220ピクセル;
    ディスプレイ: フレックス;
    テキスト配置: 中央;
    左パディング: 40px;
    左境界線: 2px 実線 @xtxColor;
    {
      幅: 38px;
      右マージン: 40px;
      フォントサイズ: 16px;
      行の高さ: 1;
      &:ホバー{
        色: @xtxColor;
      }
    }
  }
}
</スタイル>