仿导航栏（vue组件）

最新推荐文章于 2024-05-15 00:05:29 发布
最新推荐文章于 2024-05-15 00:05:29 发布
阅读量116 收藏
点赞数
分类专栏： vue自己做的组件 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68094390/article/details/130829209
版权

1，效果
请添加图片描述
2，源码
链接：https://pan.baidu.com/s/1xPR8sp6UkZhSWM8tz7IrGw?pwd=nqwa
提取码：nqwa
–来自百度网盘超级会员V4的分享
3，视频演示
【仿导航栏（vue组件）】 https://www.bilibili.com/video/BV1ho4y1g7yH/?share_source=copy_web&vd_source=58607fc67d165b8caff1ed8bfcefd35b

4，代码
在这里插入图片描述
navBar.vue

<template>
<div class="wrapper" :style="{'--width':width,'--height':height,'--fontsize':fontsize,'--paddingleft':paddingleft,'--paddingtop':paddingtop,
'--backgroundcolor':backgroundcolor}">
  <div class="one" :style="{'color':oneungetstatus,}" @click="onechangestatus">
    <i class="el-icon-s-home" ></i>
    {{name1}}
  </div>
  <div class="two" :style="{'color':twoungetstatus}" @click="twochangestatus">
    <i class="el-icon-s-promotion"></i>
    {{name2}}
  </div>
  <div class="three" :style="{'color':threeungetstatus}" @click="threechangestatus">
    <i class="el-icon-user-solid"></i>
    {{name3}}
  </div>

  <div class="three" :style="{'color':fourungetstatus}" @click="fourchangestatus">
    <i class="el-icon-user"></i>
    {{name4}}
  </div>

  <div class="three" :style="{'color':fiveungetstatus}" @click="fivechangestatus">
    <i class="el-icon-user-solid"></i>
    {{name5}}
  </div>

  <div class="three" :style="{'color':sixungetstatus}" @click="sixchangestatus">
    <i class="el-icon-video-camera-solid"></i>
    {{name6}}
  </div>

  <div class="three" :style="{'color':sevenungetstatus}" @click="sevenchangestatus">
    <i class="el-icon-view"></i>
    {{name7}}
  </div>

  <div class="three" :style="{'color':eightungetstatus}" @click="eightchangestatus">
    <i class="el-icon-loading"></i>
    {{name8}}
  </div>
</div>
</template>
<!--可以更改参数有6个
  //公用列的width（只有一列）
      width:'',
      //公用行的height（8行，每行的height都一样）
      height:'',
       //字体大小
      fontsize:'',
      //字体的paddingleft
      paddingleft:'',
      //字体的paddingtop
      paddingtop:'',
      //每行的background-color
      backgroundcolor:'antiquewhite'
 -->
<script>
export default {
  name: "navBar",
  data(){
    return{
      // //公用列的width （只有一列）
      // width:'',
      // //公用行的height  公用行的height（8行，每行的height都一样）
      // height:'',
      //第一行选中status的颜色
      onegetstatus:'rgba(245,255,255,0.85)',
      //第一行未选中状态的颜色
      oneungetstatus:'grey',
      //第二行选中status的颜色
      twogetstatus:'rgb(245,255,255)',
      //第二行未选中
      twoungetstatus:'grey',
      //第三行选中
      threegetstatus:'rgb(255, 255, 255)',
      //第三行未选中
      threeungetstatus:'grey',
      //第四行选中
      fourgetstatus:'rgb(255, 255, 255)',
      //第四行未选中
      fourungetstatus:'grey',
      //第五行选中
      fivegetstatus:'rgb(255, 255, 255)',
      //第五行未选中
      fiveungetstatus:'grey',
      //第六行选中
      sixgetstatus:'rgb(255, 255, 255)',
      //第六行未选中
      sixungetstatus:'grey',
      //第七行选中
      sevengetstatus:'rgb(255, 255, 255)',
      //第七行未选中
      sevenungetstatus:'grey',
      //第八行选中
      eightgetstatus:'rgb(255, 255, 255)',
      //第八行未选中
      eightungetstatus:'grey',
      // // //字体大小
      // fontsize:'',
      // //字体的paddingleft
      // paddingleft:'',
      // //字体的paddingtop
      // paddingtop:'',
      // //每行的background-color
      // backgroundcolor:'antiquewhite'
    }
  },

 props:['width','height','fontsize','paddingleft','paddingtop','backgroundcolor','name1','name2','name3',
 'name4','name5','name6','name7','name8'],
  methods:{
    //第一行选中和未选中状态之间切换
    onechangestatus(){
      this.oneungetstatus = this.onegetstatus
      //未选中的颜色
      var unget = 'grey'
      // eslint-disable-next-line no-self-assign
      this.twoungetstatus = unget
      this.threeungetstatus = unget
      this.fourungetstatus = unget
      this.fiveungetstatus = unget
      this.sixungetstatus = unget
      this.sevenungetstatus = unget
      this.eightungetstatus = unget
    },
  //第二行选中和未选中切换
    twochangestatus(){
      this.twoungetstatus = this.twogetstatus
      //未选中的颜色
      var unget = 'grey'
      // eslint-disable-next-line no-self-assign
      this.oneungetstatus = unget
      this.threeungetstatus = unget
      this.fourungetstatus = unget
      this.fiveungetstatus = unget
      this.sixungetstatus = unget
      this.sevenungetstatus = unget
      this.eightungetstatus = unget
    },
    //第三行选中和未选中切换
    threechangestatus(){
      this.threeungetstatus = this.threegetstatus
      //未选中的颜色
      var unget = 'grey'
      // eslint-disable-next-line no-self-assign
      this.twoungetstatus = unget
      this.oneungetstatus = unget
      this.fourungetstatus = unget
      this.fiveungetstatus = unget
      this.sixungetstatus = unget
      this.sevenungetstatus = unget
      this.eightungetstatus = unget
    },
    //第四行选中和未选中切换
    fourchangestatus(){
      this.fourungetstatus = this.fourgetstatus
      //未选中的颜色
      var unget = 'grey'
      // eslint-disable-next-line no-self-assign
      this.twoungetstatus = unget
      this.threeungetstatus = unget
      this.oneungetstatus = unget
      this.fiveungetstatus = unget
      this.sixungetstatus = unget
      this.sevenungetstatus = unget
      this.eightungetstatus = unget
    },
    //第五行选中和未选中切换
    fivechangestatus(){
      this.fiveungetstatus = this.fivegetstatus
      //未选中的颜色
      var unget = 'grey'
      // eslint-disable-next-line no-self-assign
      this.twoungetstatus = unget
      this.threeungetstatus = unget
      this.fourungetstatus = unget
      this.oneungetstatus = unget
      this.sixungetstatus = unget
      this.sevenungetstatus = unget
      this.eightungetstatus = unget
    },
    //第六行选中和未选中切换
    sixchangestatus(){
      this.sixungetstatus = this.sixgetstatus
      //未选中的颜色
      var unget = 'grey'
      // eslint-disable-next-line no-self-assign
      this.twoungetstatus = unget
      this.threeungetstatus = unget
      this.fourungetstatus = unget
      this.fiveungetstatus = unget
      this.oneungetstatus = unget
      this.sevenungetstatus = unget
      this.eightungetstatus = unget
    },
    //第七行选中和未选中切换
    sevenchangestatus(){
      this.sevenungetstatus = this.sevengetstatus
      //未选中的颜色
      var unget = 'grey'
      // eslint-disable-next-line no-self-assign
      this.twoungetstatus = unget
      this.threeungetstatus = unget
      this.fourungetstatus = unget
      this.fiveungetstatus = unget
      this.sixungetstatus = unget
      this.oneungetstatus = unget
      this.eightungetstatus = unget
    },
    //第八行选中和未选中切换
    eightchangestatus(){
      this.eightungetstatus = this.eightgetstatus
      //未选中的颜色
      var unget = 'grey'
      // eslint-disable-next-line no-self-assign
      this.twoungetstatus = unget
      this.threeungetstatus = unget
      this.fourungetstatus = unget
      this.fiveungetstatus = unget
      this.sixungetstatus = unget
      this.sevenungetstatus = unget
      this.oneungetstatus = unget
    },


  },

}
</script>

<style scoped>
:root{
/*  公用列的width*/
  --width:'';
/*  公用行的height*/
  --height:'';
/*  导航栏中的字体大小*/
  --fontsize:'';
/*  字体的padding-top*/
  --paddingtop:'';
/*  字体的paddingleft*/
  --paddingleft:'';
/*  每行的background-color*/
  --backgroundcolor:'';
}
.wrapper{

  padding-top: 30px;

  display: grid;
  grid-template-columns: var(--width);
  grid-gap: 10px;

  grid-template-rows: var(--height) var(--height) var(--height) var(--height)
var(--height) var(--height) var(--height) var(--height);

}

.one{
  padding-left: var(--paddingleft);
  padding-top: var(--paddingtop);
  font-weight:bold;

  font-size: var(--fontsize);
  transition: transform 0.3s ease;
  background-color: var(--backgroundcolor);
}

.one:hover{
  box-shadow: 0 0 10px gray;
  transform: scale(0.98);
}
.two{
  padding-left: var(--paddingleft);
  padding-top: var(--paddingtop);
  font-weight:bold;

  font-size: var(--fontsize);
  transition: transform 0.3s ease;
  background-color: var(--backgroundcolor);
}
.two:hover{
  box-shadow: 0 0 10px gray;
  transform: scale(0.98);
}
.three{
  padding-left: var(--paddingleft);
  padding-top: var(--paddingtop);
  font-weight:bold;

  font-size: var(--fontsize);
  transition: transform 0.3s ease;
  background-color: var(--backgroundcolor);
}
.three:hover{
  box-shadow: 0 0 10px gray;
  transform: scale(0.98);
}
.four{
  padding-left: var(--paddingleft);
  padding-top: var(--paddingtop);
  font-weight:bold;
  color: gray;

}
.five{
  padding-left: var(--paddingleft);
  padding-top: var(--paddingtop);
  font-weight:bold;
  color: gray;

}
.six{
  padding-left: var(--paddingleft);
  padding-top: var(--paddingtop);
  font-weight:bold;
  color: gray;

}
.seven{
  padding-left: var(--paddingleft);
  padding-top: var(--paddingtop);
  font-weight:bold;
  color: gray;

}
.eight{
  padding-left: var(--paddingleft);
  padding-top: var(--paddingtop);
  font-weight:bold;
  color: gray;

}

/*!* 设置大屏幕的字体大小为20px *!*/
/*@media screen and (min-width: 1200px) {*/
/*  .one {*/
/*    font-size: 13px;*/
/*  }*/
/*  .two{*/
/*    font-size: 13px;*/
/*  }*/
/*  .three{*/
/*    font-size: 13px;*/
/*  }*/
/*}*/

/*!* 设置中等屏幕的字体大小为18px *!*/
/*@media screen and (max-width: 1200px) and (min-width: 768px) {*/
/*  .one {*/
/*    font-size: 7px;*/
/*  }*/
/*  .two{*/
/*    font-size: 7px;*/
/*  }*/
/*  .three{*/
/*    font-size: 7px;*/
/*  }*/
/*}*/




</style>

homeWl.vue

<template>
<div>
  <nav-bar :width="width" :height="height" :fontsize="fontsize" :paddingleft="paddingleft"
  :paddingtop="paddingtop" :backgroundcolor="backgroundcolor"
  :name1="name1" :name2="name2" :name3="name3" :name4="name4"
  :name5="name5" :name6="name6" :name7="name7" :name8="name8"></nav-bar>
</div>
</template>
<!--可以更改参数有6个  另外有8个name1,name2...等传入自己自定义的名字
  //公用列的width（只有一列）
      width:'',
      //公用行的height（8行，每行的height都一样）
      height:'',
       //字体大小
      fontsize:'',
      //字体的paddingleft
      paddingleft:'',
      //字体的paddingtop
      paddingtop:'',
      //每行的background-color
      backgroundcolor:'antiquewhite'
 -->
<script>
import NavBar from "@/components/navBar/navBar";
export default {
  name: "homeWl",
  data(){
  return{
    //公用列的width （只有一列）
    width:'',
    //公用行的height  公用行的height（8行，每行的height都一样）
    height:'',
    //字体大小
    fontsize:'',
    //字体的paddingleft
    paddingleft:'',
    //字体的paddingtop
    paddingtop:'',
    //每行的background-color
    backgroundcolor:'antiquewhite',
    name1:'首页',
    name2:'推荐',
    name3:'关注',
    name4:'朋友',
    name5:'我的',
    name6:'直播',
    name7:'放映',
    name8:'热点'
       }
   },
  components: {NavBar},
  mounted() {
    this.gethomeheight()
    this.gethomewidth()
    window.addEventListener('resize', this.gethomewidth); // 在窗口大小改变时重新获取窗口宽度
    window.addEventListener('resize', this.gethomeheight);
  },
  methods:{
    gethomewidth(){
      // 获取窗口宽度
      var windowwidth = window.innerWidth
      //公用列width（只有一列）
      this.width = parseInt(windowwidth/5/4)+'px'
      //字体大小
      this.fontsize = parseInt(windowwidth/5/4/5)+'px'
      //字体的paddingleft
      this.paddingleft = parseInt(windowwidth/5/4/5)+'px'
      //字体的paddingtop
      this.paddingtop = parseInt(windowwidth/5/4/6)+'px'
    },
    // 获得窗口height度
    gethomeheight(){

      var windowheight = window.innerHeight
      //公用行的height(公用8行，每行height都一样)
      this.height = parseInt(windowheight/9/2)+'px'

    }
  },

}
</script>

<style scoped>

</style>

参数解释

可以更改参数有6个  另外有8个name1,name2...等传入自己自定义的名字
  //公用列的width（只有一列）
      width:'',
      //公用行的height（8行，每行的height都一样）
      height:'',
       //字体大小
      fontsize:'',
      //字体的paddingleft
      paddingleft:'',
      //字体的paddingtop
      paddingtop:'',
      //每行的background-color
      backgroundcolor:'antiquewhite'
我是梦磊OL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
模仿飞书文档右侧滑动导航栏
liuhao9999的博客
03-31 580
<!DOCTYPE html> <html> <head> <style> * { padding: 0px; margin: 0px; } .scrollCon { width: 0px; height: 300px; position: fix...
vue-带动画效果的NavBar
郝峰vip的博客
12-11 649
前沿 小编在开发项目过程中遇到一个交互的需求，带动画的Navbar，就是类似于element-ui的tabs标签页的动画效果，由于种种原因吧，小编就开始自己搞了一个，在这过程中发现了<slot></slot>插槽这个非常有价值的鬼，于是就开始研究了，终于搞了一个可以复用的组件，分享出来大家一块学习。 声明： slot 的介绍在代码中会有体现，话不多说，上代码。 ...
vue通过路由的meta属性来控制navbar和bar的显示隐藏
最新发布
2401_84092903的博客
05-15 114
vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果
总结前端开发中遇到的问题，分享前端知识
08-19 1538
navbar、tabbar导航条根据位置移动距离实现颜色过渡、动画效果
vue制作导航栏html,Vue如何实现导航栏菜单的方法
weixin_29876887的博客
06-07 2437
Vue如何实现导航栏菜单的方法发布时间：2020-08-20 09:42:45来源：亿速云阅读：235作者：小新这篇文章将为大家详细讲解有关Vue如何实现导航栏菜单的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称 您好，用户！v-bind:...
vue 組件式開發navBar
software20121216的博客
11-28 335
如下圖 是要實現的效果 如下為代碼塊 //NavBar.vue <template> <div id="vab-bar"> <div class="nav-bar"> <div class="left"><slot name="left"></slot></div> ...
前端VUE导航栏封装组件
07-22
总结一下，封装Vue组件的核心思想是模块化和可复用性。通过创建`Tabber`组件，我们可以将导航栏的逻辑和样式独立出来，使其在多个页面或项目中重复使用。Vue CLI 3则提供了一套便捷的脚手架工具，简化了项目的初始化...
详解Vue底部导航栏组件
10-17
在Vue.js框架中，底部导航栏（Bottom Navigation Bar）是一个常见的UI组件，它通常用于在多个主屏幕之间切换，提供用户友好的导航体验。本文将深入解析如何在Vue中实现一个自定义的底部导航栏组件。 首先，让我们...
vue router仿天猫底部导航栏功能
08-29
Vue Router仿天猫底部导航栏功能 ...本文主要介绍了使用 Vue Router 实现仿天猫底部导航栏功能的方法，包括获取图标、创建路由导航组件、使用样式、实现路由导航、使用图标和实现底部导航栏等知识点。
vue实现nav导航栏的方法
08-28
导航栏是每一个网页项目都少不了的组件，每一个项目都需要实现导航栏的功能。通过原始的方法基本上都是可以写出来的。但是要写出代码量少，冗余度低的代码就要动脑子思考一下了。 在vue项目中，实现nav导航栏的方法...
Vue实现导航栏菜单
10-14
在Vue.js中实现导航栏菜单是一项基础而重要的任务，它能为用户提供清晰的页面结构和交互体验。在提供的代码示例中，我们看到一个简单的Vue应用，用于创建一个左侧导航栏菜单，当用户点击菜单项时，右侧内容区域会...
navBar-scroll:基于vue.js的仿支付宝导航条吸顶滑动效果组件
05-17
myproject 基于vue.js的仿支付宝导航条吸顶滑动效果组件，导航菜单数量和内容菜单数量可随意扩展，且导航菜单字数无限制，随意配置，如果顶部和底部有固定占位元素，也可直接配置，无需额外修改样式。 示例图片展示 Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev 后即可查看效果
使用Vue-Grid-Layout实现自定义工作台
02-01
使用Vue-Grid-Layout实现自定义工作台
VUE组件封装01---Navbar
m0_52336986的博客
05-17 402
<template> <div class="nav-bar"> <div class="left"><slot name="left"></slot></div> <div class="center"><slot name="center"></slot></div> <div class="right"><sl
vue 实现封装一个导航栏组件 以及 点击效果
qq_48823919的博客
07-15 1448
文章目录前言一、封装1、布局2、实现二、使用1.引入并设置内容+简单布局2.添加效果，点击变色，返回上一级 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、封装 1、布局 左右两侧我们可以用来放置图标之类的 中间部分我们用来保存内容 2、实现 直接在slot 上是不可以书写样式的 将slot 放入div 中，然后书写大体的布局样式 <template> <div class="nar-bar"> <div class="left"&g.
vue导航栏组件
qq_45179361的博客
02-09 3143
使用html+css搭建网页导航栏。
vue之自定义一个NavBar导航栏组件
weixin_45990436的博客
11-28 2554
<template> <div class="nav-bar"> <div class="title"> <div class="blak"> <img class="img" src="../../assets/image/left.png" alt="" @click="blackclick" v-if="is.
Vue 导航栏滚动定位功能实现，导航栏-滚动页面；滚动页面-导航栏；
weixin_63257279的博客
08-30 1657
本文档介绍了如何在 Vue.js 项目中实现一个具有滚动定位功能的导航栏组件。该组件可以根据页面滚动位置高亮显示对应的导航菜单项，并且点击菜单项时，页面可以平滑滚动到相应的内容区域。在Navbar：保存根级子菜单的 keys。activeMenu：保存当前选中菜单的 key。：监听滚动事件的方法，根据滚动位置计算当前应该高亮显示的导航菜单项。：点击导航菜单项时，滚动到相应的内容区域。步骤 3：监听滚动事件在Navbar组件的 mounted 钩子函数中，使用方法监听滚动事件，并在事件触发时调用方法。
vue.js顶部导航栏组件
06-10
可以使用Vue.js的组件化思想来实现一个顶部导航栏组件。以下是一个简单的实现例子： ```html <!-- Logo 或者网站名称 --> <!-- 右上角的汉堡菜单 --> <span aria-hidden="true"></span> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是梦磊OL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值