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

Related commands to completely uninstall nginx under ubuntu16.04

nginx Overview nginx is a free, open source, high...

CSS specification BEM CSS and OOCSS sample code detailed explanation

Preface During project development, due to differ...

The submit event of the form does not respond

1. Problem description <br />When JS is use...

Instructions for using the --rm option of docker run

When the Docker container exits, the file system ...

Mysql Sql statement exercises (50 questions)

Table name and fields –1. Student List Student (s...

NodeJS realizes image text segmentation

This article shares the specific code of NodeJS t...

Native js imitates mobile phone pull-down refresh

This article shares the specific code of js imita...

Let you understand how HTML and resources are loaded

All content in this blog is licensed under Creati...

Docker-compose installation db2 database operation

It is troublesome to install the db2 database dir...

React implements a general skeleton screen component example

Table of contents What is a skeleton screen? Demo...

Talk about important subdirectory issues in Linux system

/etc/fstab Automatically mount partitions/disks, ...

Use of nginx custom variables and built-in predefined variables

Overview Nginx can use variables to simplify conf...

Examples of correct use of interface and type methods in TypeScript

Table of contents Preface interface type Appendix...