Vue3导航栏组件封装实现方法

在Vue3中封装一个导航栏组件,并且实现,随着滚动条滚动实现一个吸顶效果,供大家参考

导航栏组件的效果图:

滚动条滚动以后的吸顶效果示意图:

具体代码展示:

<template>
  <header class="app-header">
    <div class="container">
      <!-- 头部导航区域 -->
      <HeaderNavCommon />
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜一搜" />
      </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>

中间菜单部门单独封装一个组件,实现两个组件的复用  (HeaderNavCommon组件)

<template>
  <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>
</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>

封装吸顶效果的组件

<template>
  <div class="app-header-sticky" :class="{ show: top >= 78 }">
    <div class="container" v-if="top >= 78">
      <!-- 中间 -->
      <HeaderNavCommon />
      <!-- 右侧按钮 -->
      <div class="right">
        <RouterLink to="/">品牌</RouterLink>
        <RouterLink to="/">专题</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() {
    // 页面滚动距离
    // const top = ref(0)
    // window.onscroll = () => {
    //   top.value = document.documentElement.scrollTop
    // }
    // 页面滚动利用第三方包
    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;
  // 此处为关键样式!!!
  // 默认情况下完全把自己移动到上面
  transform: translateY(-100%);
  // 完全透明
  opacity: 0;
  // 显示出来的类名
  &.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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-09-14

vue router仿天猫底部导航栏功能

首先把天猫的导航贴出来,里面包括精选.品牌.会员.购物车.我五个导航及对应的图标. 分析: 1.图标的获取 进入阿里巴巴矢量图标库,网址  http://www.iconfont.cn. 点击官方图标库,选择天猫图标库,选中放入购物车. 点击添加至项目,点击创建新项目按钮,创建tianmao项目,点击确定. 此时会有查看在线链接和下载至本地两种方式,我选择第一种,因为后期如果要添加小图标的话,只需要重新生成在线链接,然后更新link即可 复制链接到index.html的link标签内,具体为 <

vue使用ElementUI时导航栏默认展开功能的实现

本文主要参考: http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了.可以在上边的网站上看到. 现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容. 具体操作是这样的: <script src="//unpkg.com/vue/dist/vue.js"></script> <scr

vue实现nav导航栏的方法

每一个网页项目都少不了导航栏,通过原始的方法基本上都是可以写出来的.但是要写出代码量少,冗余度低的代码就要动脑子思考一下了. 最近写了一个百度地图的项目,要求底部有一个导航栏.具体如下图: 首先,拿到了底部导航栏的所有图标图片,图片都有两种.灰色的代表未选中,选中的用带样色的图片替换. 先看一下,组件中 html结构:通过vue提供的v-for方法,进行遍历显示footNav这个数组.数组里边存放着{title:"银行",url:" ",url1:" &q

Vue实现导航栏菜单

本文实例为大家分享了Vue实现导航栏菜单的具体代码,供大家参考,具体内容如下 这里是刚学习vue的时候,没有用vue的任何UI组件库写的导航栏菜单. menu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航栏左</title> <link rel="stylesheet" href="css/

VUE 实现滚动监听 导航栏置顶的方法

HTML 非重点的代码,比如样式啥的,我就不放上来了,一笔带过 简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解 <div :style="{ paddingBottom: paddingBottom}"> <header>资源信息</header> <div> <!-- 公司信息 浏览量 --> </div> <div id="fixedBar" :class=&quo

vue elementUI使用tabs与导航栏联动

不使用tabs标签页时,点击导航菜单,router-view映射相应的组件即可显示页面.但我们想在点击导航栏时在tabs中映射相应的组件,这就需要使用tabs组件 在slider.vue中点击路由后,把当前选择的路由@select使用bus传出去 <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color=

vue实现导航栏效果(选中状态刷新不消失)

Vue导航栏 用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题.也可以选择自适应屏幕.看一下效果,底部的图标全是UI给的选中和未选中样式的图片,根据公司要求,你也可能会用fontsize去写.(全部代码黏贴到本文的最后面了) 1.首先把这些小图片放到src/assets路径下面(自动base64编码) 2.在data()里边定义一个选中对应的变量isSelect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未

vue自定义底部导航栏Tabbar的实现代码

如图所示,要完成类似的一个底部导航切换. 首先.我们需要分为5个大的VUE文件.可以根据自己的习惯来放在不同的位置. 我将5个主要的vue文件放在了5个不同的文件夹 然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件 Item.vue文件如下 <template> <div class="itemWarp flex_mid" @click='changePage'> <span v-show='!bol'> <

Vue实现导航栏点击当前标签变色功能

本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码,供大家参考,具体内容如下 1.效果 2.所有代码 <template> <div class="now-time"> <div class="timebox"> <a href="#" rel="external nofollow" v-for="(item,index) in nowTime" v

vue2.0 elementUI制作面包屑导航栏

Main.js var routeList = []; router.beforeEach((to, from, next) => { var index = -1; for(var i = 0; i < routeList.length; i++) { if(routeList[i].name == to.name) { index = i; break; } } if (index !== -1) { //如果存在路由列表,则把之后的路由都删掉 routeList.splice(index

vue element-ui实现动态面包屑导航

vue element-ui动态面包屑导航,供大家参考,具体内容如下 直接上代码 一.template代码 // 这是单独的组件 <template> <el-breadcrumb separator-class="el-icon-arrow-right"> // 首页我是写死的,其他的遍历出来 <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item

vue+elementUI动态生成面包屑导航教程

效果如下所示: 项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示 <el-menu :unique-opened="true" router :default-active="$route.path" @select="handleSelect"> <div class="user-menu-box" v-for="menu in menus" :key="menu.

BootStrap学习笔记之nav导航栏和面包屑导航

nav导航栏 <nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"></div> <div class="navbar-header"> <a href="#" class="navbar-brand"> 大大的log

php可应用于面包屑导航的递归寻找家谱树实现方法

本文实例讲述了php可应用于面包屑导航的递归寻找家谱树实现方法.分享给大家供大家参考.具体实现方法如下: <?php echo "<pre>"; $area = array( array('id'=>1,'area'=>'北京','pid'=>0), array('id'=>2,'area'=>'广西','pid'=>0), array('id'=>3,'area'=>'广东','pid'=>0), array('

Bootstrap组件学习之导航、标签、面包屑导航(精品)

导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- <link rel="stylesheet" >--> <link rel="stylesheet" href="css/bootst

php可应用于面包屑导航的迭代寻找家谱树实现方法

本文实例讲述了php可应用于面包屑导航的迭代寻找家谱树实现方法.分享给大家供大家参考.具体实现方法如下: <?php echo "<pre>"; $area = array( array('id'=>1,'area'=>'北京','pid'=>0), array('id'=>2,'area'=>'广西','pid'=>0), array('id'=>3,'area'=>'广东','pid'=>0), array('

面包屑导航详解

关于网站上的面包屑导航很多朋友不知道为什么这么叫.顾名思义,面包屑挺巧就是琐碎的意思,一点点的形状,这就代表我们的网站导航中,那些不在主导航上,其他辅助性琐碎的导航就叫面包屑导航了. 首先我们来看看面包屑导航的作用: 1.让用户了解当前所处位置,以及当前页面在整个网站中的位置. 2.体现了网站的架构层级,能够帮助用户快速学习和了解网站内容和组织方式,从而形成很好的位置感 3.提供返回各个层级的快速入口,方便用户操作. 4.Google已经将面包屑导航整合到搜索结果里面,因此优化面包屑导航每个层级

vue中的面包屑导航组件实例代码

vue的面包屑导航组件 用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat

Vuex,iView UI面包屑导航使用扩展详解

本案例是基于Vuex的公共数据库,你在了解本案例之前要了解Vuex的使用方法. https://www.iviewui.com/components/breadcrumb 打开网址我们可以知道这个组件的面包屑导航是基于路由跳转的.但是我们项目中常常用到单页面查询面包屑导航.小生开始为这个纠结好久.然后和小伙伴一起研究出来一套单页面不用路由跳转的使用方法. 先看看效果图 1,首次进来 2,查询结果 3,再次点击面包屑导航 4,查询结果 基本的效果是这样的 下面看代码 <template> <