Vue3 navigation bar component encapsulation implementation method

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

Recommend

CSS3 uses animation attributes to achieve cool effects (recommended)

animation-name animation name, can have multiple ...

MySQL trigger trigger add, delete, modify and query operation example

This article uses examples to describe the add, d...

Detailed explanation of mysql.user user table in Mysql

MySQL is a multi-user managed database that can a...

Detailed explanation of MySQL combined query

Using UNION Most SQL queries consist of a single ...

JavaScript Advanced Closures Explained

Table of contents 1. The concept of closure Addit...

Vue implements tab label (label exceeds automatic scrolling)

When the created tab label exceeds the visible ar...

MySQL 5.7.17 installation and configuration method graphic tutorial (windows)

1. Download the software 1. Go to the MySQL offic...

Example code for implementing a simple search engine with MySQL

Table of contents Preface Introduction ngram full...

Implementing image fragmentation loading function based on HTML code

Today we will implement a fragmented image loadin...

Tutorial on installing MySQL8 compressed package version on Win10

1 Download MySQL8 from the official website and i...