Vue中二级菜单的实现

这篇具有很好参考价值的文章主要介绍了Vue中二级菜单的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在不使用ElementUi等框架的情况下,制作一个二级菜单,网上搜寻很多资料,但部分要不只显示HTML结构,不显示CSS样式,要不就是复杂的让人无法理解。

效果图:
Vue中二级菜单的实现

针对菜单做了CSS样式修饰,给一级二级菜单都添加了鼠标悬浮事件,当悬浮到某个菜单时,背景颜色,字体颜色发生改变。当点击某个一级菜单时,二级菜单实现显示和隐藏的动态切换。

菜单的HTML结构:
<div class="nav">
          --------------------一级菜单------------------
        <ul>
          <li
            v-for="item in menus"
            :key="item.id"
            @click="changeCheck(item.id)"
            :class="{ check: currentTag == item.path }"
            class="mainMenu"
          >
            <router-link
              :to="{name:item.path,params:userName}"
              class="mainA"
              @click.native="TabName(item.title)"
              >{{ item.title }}</router-link
            >
          ------------------二级菜单----------------------
            <ul v-if="item.children && item.active">
              <li
                class="subMneu"
                v-for="(child, index) in item.children"
                :key="index"
                @click="clickSubMenu(item,child.title)"
              >
                <router-link
                  class="menuB"
                  :to="{name:child.path,params:userName}"
                  :class="{ menu_active: child.active }"
                  >{{ child.title }}</router-link
                >
              </li>
            </ul>
          </li>
        </ul>
      </div>
代码分析:
  1. 针对菜单采用的是ul列表,然后采用v-for循环对菜单数据进行循环,菜单采用的是动态样式 : class

当点击菜单的path地址和菜单中的某个path相等时,动态渲染该样式。

  1. li包含<router-link>是为了当点击该菜单时,跳转到相应的内容

菜单的JS代码:

data( )函数数据:

export default {
  components: {

  },
  data() {
    return {
      menus: [
        { id: 1, title: "用户管理", path: "UserMannger", active: false },
        {
          id: 2,
          title: "商品管理",
          path: "goodsManger",
          active: false,
          children: [
            { id: 21, title: "增加商品", path: "addGoods", active: false },
          ],
        },
        { di: 3, title: "关于我们", path: "about", active: false },
      ],
      currentTag: "",
      tabName: "",
      flag2: true,
      // tabName:'用户管理',
      userName:''
    };
  },

JS代码

methods: {
    changeCheck(id) {

      const obj = this.menus.find((item) => item.id == id);
      this.menus.find((item) => {
        if (item.id == id) {
          item.active = !item.active;
          if (item.children) {
            item.children.active = !item.active;
          }         
        }
      });
      this.currentTag = obj.path;
    },
    clickSubMenu(main,val) {
      this.tabName = val
      main.children[0].active = !main.children[0].active
      main.active = !main.children[0].active;
    },
    backHome() {
      this.$router.push("/UserMannger/123");
    },
    getLogin2(val){
      this.userName = val
    },
    TabName(val){
      console.log(val);
      this.tabName = val
    }
  },
  created() {
    this.$bus.$on('toHome',this.getLogin2)
  },
};

方法中 changeCheck函数分析:

  1. 首先先接收点击菜单的id,对menus数字进行遍历,当id相同时,将该菜单的active属性进行动态改变,这样做是为了动态切换样式。在遍历中还要对子菜单进行判断,如果有子菜单则将该子菜单的active属性改变

方法中 clickSubMneu函数分析:

  1. 因为该方法是当点击子菜单触发此事件,触发事件时传入该子菜单的一级菜单,然后将该菜单的子菜单的active属性进行动态改变,并且将主菜单的active属性始终与子菜单保持相反。

  1. 因为这里只设置了一个子菜单所以下标为0,当需要设置多个子菜单时,还需要传入index和子菜单的index然后进行判断方法和对一级菜单的判断相同。

CSS代码
当点击子菜单的a标签的公共样式
.menu_active {
  color: red;
  display: block;
  width: 100%;
  text-decoration: none;
  color: rgb(255, 208, 75);
  background-color: #409eff;
}

菜单修饰
.nav {
      height: 100%;
      flex-grow: 1;
      background-color: #001529;
      ul {
        .mainMenu {
          margin-top: 20px;
          width: 100%;
          text-align: center;
          line-height: 50px;
          color: white;

          .mainA {
            display: block;
            width: 100%;
            text-decoration: none;
            color: white;
            &:hover {
              background-color: #409eff;
            }
            &:active {
              color: rgb(255, 208, 75);
            }
          }
        }
      }
    }

这里采用的SCSS预编译语言:

在菜单css修饰中需要注意的是,一定要给一级菜单和二级菜单起名字,即使scss能够嵌套,依然会发生样式穿透的bug,所以针对一级菜单和二级菜单的样式进行单独修饰。

这里还需要知道的是 scss中有 :active和 : hover 的伪类用法,前者是当点击时触发该样式,后者是鼠标悬浮时触发的样式。文章来源地址https://www.toymoban.com/news/detail-481470.html

到了这里,关于Vue中二级菜单的实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ElementPlus el-cascader级联选择器 实现一级菜单单选,二级菜单多选

    需求: 利用el-cascader级联实现一级菜单单选,二级菜单多选的功能,如下图所示: 思路: 使用了多选multiply属性,这个属性下,选中的数据结构为:一级为length1的数组,二级为length2的数组。利用标识符,把最后选中的一级菜单的值与标识符做对比,如不同,则让标识符的值

    2024年02月11日
    浏览(46)
  • vue2 实现后台管理系统左侧菜单联动实现 tab根据路由切换联动内容,并支持移动端框架

    效果图: pc端  移动端    由于代码比较多,我这里就不一一介绍了,可以去我的git上把项目拉下来 git地址https://gitee.com/Flechazo7/htglck.git 后台我是用node写的有需要的可以评论联系

    2024年02月16日
    浏览(43)
  • 使用Vue+elementUI实现CRUD

    最近了解了一下前端框架VUE,来记录一下 Vue官网https://cn.vuejs.org/ Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整

    2024年02月16日
    浏览(35)
  • vue2:elementUI中Form 表单在特定情况下做动态rules添加删除

    先看需求: (不想看的直接拉到最后)  【需求说明】 6、如状态为上架时,库存为必填,下架状态时,库存为可填,前面无星号 实现方法:使用this.$set()和this.$delete() 上代码: 由于设计商业隐私,代码只上传一部分:   表单data中原来的rules: 不添加上下架状态的rules 在

    2023年04月08日
    浏览(40)
  • 使用Vue+Vue-router+el-menu实现菜单功能实战

    上节回顾 上一小节我们使用 H5+CSS3 实现了管理平台的 架构布局 ,并且通过 Vuex 的使用,获取到前端数据本地化存储的username,绑定到右上角进行全局展示。还不了解上下文的同学可以回顾一下 使用Vue+Vuex+CSS3完成管理端响应式架构模板实战 。 本节介绍 本小节已经是专栏的

    2023年04月15日
    浏览(36)
  • 12 使用Vue+Vue-router+el-menu实现菜单功能实战

    上节回顾 上一小节我们使用 H5+CSS3 实现了管理平台的 架构布局 ,并且通过 Vuex 的使用,获取到前端数据本地化存储的username,绑定到右上角进行全局展示。还不了解上下文的同学可以回顾一下 使用Vue+Vuex+CSS3完成管理端响应式架构模板实战 。 本节介绍 本小节已经是专栏的

    2024年02月16日
    浏览(80)
  • 使用Vue实现一个当鼠标悬浮时出现,鼠标离开时消失的双层菜单

    分享一个基于Vue实现一个当鼠标悬浮时出现,鼠标离开时消失的双层菜单。同时也是为了以后需要类似的需求时,可以提供一个实现思路,以及可以快速ctrl+c和ctrl+v操作,提高工作效率~ (1)/src/views/Example/DiyNavMenu/index.vue // Todo

    2024年02月05日
    浏览(41)
  • ssm551基于vue框架和elementui组件的手机官网+vue

    题目:手机官网 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本手机官网就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息,使用这种软件工具可

    2024年01月24日
    浏览(36)
  • Proteus平台下基于Arduino的通过UART串口可靠通信系统仿真、传感器数据采集、以及LCD屏幕二级菜单功能实现(附工程源码、设计报告)

    三个按键控制菜单,功能分别为:选择功能1,选择功能2,以及返回上一级; 通过三个外部中断对页面状态参量进行控制: 停止等待 当U1收到U2的ACK后才会发送下一次传感器采集到的数据 超时重传 当关闭U2后,U1到达设定的超时时间后,进行重传操作,直到收到U2的确认收到

    2024年02月16日
    浏览(45)
  • 【Settings随记:二】一级菜单,二级菜单的添加与隐藏,添加辅助功能

    我们可以先从Settings的启动来看, 先进入到AndroidManifest.xml 找到启动的Activity

    2024年02月10日
    浏览(120)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包