Vue3 navigation bar component encapsulation implementation method

Encapsulate a navigation bar component in Vue3, and realize a ceiling effect as the scroll bar scrolls, for your reference

The effect diagram of the navigation bar component:

Schematic diagram of the ceiling effect after the scroll bar is scrolled:

Specific code display:

<template>
  <header class="app-header">
    <div class="container">
      <!-- Header navigation area -->
      <HeaderNavCommon />
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="Search" />
      </div>
      <div class="cart">
        <a href="#" class="curr">
          <i class="iconfont icon-cart"></i>
          <em>2</em>
        </a>
      </div>
    </div>
  </header>
</template>
 
<script>
import HeaderNavCommon from '@/components/header-nav-common.vue'
export default {
  name: 'AppHeader',
  components:
    HeaderNavCommon
  }
}
</script>
 
<style scoped lang="less">
.app-header {
  background: #fff;
  .container {
    display: flex;
    align-items: center;
  }
  .navs {
    width: 820px;
    display: flex;
    justify-content: space-around;
    padding-left: 40px;
    li {
      margin-right: 40px;
      width: 38px;
      text-align: center;
      a {
        display: inline-block;
        font-size: 16px;
        line-height: 32px;
        height: 32px;
      }
      &:hover {
        a {
          color: @xtxColor;
          border-bottom: 1px solid @xtxColor;
        }
      }
    }
  }
  .search {
    width: 170px;
    height: 32px;
    position: relative;
    border-bottom: 1px solid #e7e7e7;
    line-height: 32px;
    .icon-search {
      font-size: 18px;
      margin-left: 5px;
    }
    input {
      width: 140px;
      padding-left: 5px;
      color: #666;
    }
  }
  .cart {
    width: 50px;
    .curr {
      height: 32px;
      line-height: 32px;
      text-align: center;
      position: relative;
      display: block;
      .icon-cart {
        font-size: 22px;
      }
      em {
        font-style: normal;
        position: absolute;
        right: 0;
        top: 0;
        padding: 1px 6px;
        line-height: 1;
        background: @helpColor;
        color: #fff;
        font-size: 12px;
        border-radius: 10px;
        font-family: Arial;
      }
    }
  }
}
</style>

The middle menu department is encapsulated in a separate component to achieve the reuse of two components (HeaderNavCommon component)

<template>
  <ul class="app-header-nav">
    <li class="home"><RouterLink to="/">Home</RouterLink></li>
    <li><a href="#" >Delicious food</a></li>
    <li><a href="#" >Kitchen</a></li>
    <li><a href="#" >Art</a></li>
    <li><a href="#" >Electrical appliances</a></li>
    <li><a href="#" >Home</a></li>
    <li><a href="#" >Care</a></li>
    <li><a href="#" >Pregnancy and Infant</a></li>
    <li><a href="#" >Clothing</a></li>
    <li><a href="#" >Groceries</a></li>
  </ul>
</template>
 
<script>
 export default {
    name: 'AppHeaderNav'
   }
</script>
 
<style scoped lang='less'>
.app-header-nav {
    width: 820px;
    display: flex;
    padding-left: 40px;
    position: relative;
    z-index: 998;
  li {
    margin-right: 40px;
    width: 38px;
    text-align: center;
  a {
    font-size: 16px;
    line-height: 32px;
    height: 32px;
    display: inline-block;
   }
  &:hover {
    a {
    color: @xtxColor;
    border-bottom: 1px solid @xtxColor;
        }
      }
  }
}
</style>

Components for encapsulating ceiling effects

<template>
  <div class="app-header-sticky" :class="{ show: top >= 78 }">
    <div class="container" v-if="top >= 78">
      <!-- Middle -->
      <HeaderNavCommon />
      <!-- Right button -->
      <div class="right">
        <RouterLink to="/">Brand</RouterLink>
        <RouterLink to="/">Topic</RouterLink>
      </div>
    </div>
  </div>
</template>
 
<script>
import HeaderNavCommon from '@/components/header-nav-common.vue'
// import { ref } from 'vue'
import { useWindowScroll } from '@vueuse/core'
export default {
  name: 'AppHeaderSticky',
  components: { HeaderNavCommon },
  setup() {
    // Page scroll distance // const top = ref(0)
    // window.onscroll = () => {
    // top.value = document.documentElement.scrollTop
    // }
    // Page scrolling using third-party packages const { y: top } = useWindowScroll()
    return { top }
  }
}
</script>
 
<style scoped lang="less">
.app-header-sticky {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  // This is the key style!!!
  // By default, move yourself completely to the top transform: translateY(-100%);
  // Completely transparent opacity: 0;
  //Displayed class name&.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }
  .container {
    display: flex;
    align-items: center;
  }
  .right {
    width: 220px;
    display: flex;
    text-align: center;
    padding-left: 40px;
    border-left: 2px solid @xtxColor;
    a {
      width: 38px;
      margin-right: 40px;
      font-size: 16px;
      line-height: 1;
      &:hover {
        color: @xtxColor;
      }
    }
  }
}
</style>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue3.x uses mitt.js for component communication
Steps for Vue3 to use mitt for component communication
Detailed explanation of Vue3 encapsulation Message message prompt instance function
Detailed explanation of the usage of sync modifier in Vue3 parent-child component parameter transfer
Introduction to reactive function toRef function ref function in Vue3
Comparison of the advantages of vue3 and vue2
Practical record of Vue3 combined with TypeScript project development
Summary of Vue3 combined with TypeScript project development practice
Vue3 Documentation Quick Start
Details of 7 kinds of component communication in Vue3

<<: Implementation of LNMP for separate deployment of Docker containers

>>: Solution to MySQL root password error number 1045