vue+iView 动态侧边栏菜单保持高亮选中

沐风拂千渔

已于 2023-10-27 18:28:41 修改

阅读量924

点赞数 1

分类专栏： UI框架踩坑指南 Vue 功能文章标签： vue.js iView Menu Sider 动态菜单前端 view design

于 2023-10-27 18:14:00 首次发布

本文链接：https://blog.csdn.net/weixin_44794123/article/details/134080462

版权

UI框架踩坑指南同时被 3 个专栏收录

59 篇文章 0 订阅

订阅专栏

Vue

43 篇文章 1 订阅

订阅专栏

功能

10 篇文章 0 订阅

订阅专栏

iview 组件在使用过程中，多多少少有一些小坑，本文简单罗列一二：

避坑指南：关于iview 侧边栏菜单未能展开高亮选中回显问题
应用场景：iview-admin下接入动态菜单后，刷新或链接跳入时回显失效

简单就是两个方面：动态菜单接入前和动态菜单接入后菜单保持高亮选中问题。

一，动态菜单接入前：

本博客中有一篇文章简单介绍了 iView跳转子菜单父级菜单保持高亮的实现方法：

:active-name="$route.name"

  <side-menu
          accordion
          ref="sideMenu"
          :active-name="$route.name"
          :collapsed="collapsed"
          @on-select="turnToPage"
          :menu-list="menuList">
 </side-menu>

菜单保持高亮选中

1，方法一:

跳转前页面的name保持一致，跳转页中meta中加

recoverName: ‘user-info’ // 和跳转前页面的name保持一致。

2，方法二:

:active-name="activeName()"

<side-menu
        accordion
        ref="sideMenu"
        :active-name="activeName()"
        :collapsed="collapsed"
        @on-select="turnToPage"
        :menu-list="menuList"
      >

method中加

activeName() {
          if (this.$route.meta.activeName){
               return this.$route.meta.activeName; 
          }else{
               return this.$route.name; 
          }
     },

这样两种方法都是没有问题的，但接入权限使用动态菜单时就存在一个问题：

刷新页面或使用链接跳转进入时就会出现跳转到首页，父菜单收起，子菜单未保持选中高亮

二，动态菜单接入后：

本博客中另一篇文章也简单介绍了 iview 动态渲染显示侧边栏菜单及获取选中数据，渲染方法：

:menu-list="menuList"

主要是动态菜单接入后，菜单高亮选中就会失效

main.vue 的mounted中接口动态获取菜单数据，渲染侧边栏菜单。

 store.dispatch('getMenuData').then(res => {
  }

菜单高亮选中失效问题解决方法：

我们可以通过方法 iview menu updateOpened updateActiveName属性：

updateOpened()
updateActiveName()

this.$refs.sideMenu.updateOpenName(this.$route.name);

在菜单请求后调用，但是必须在$nextTick里使用才有效

 store.dispatch('getMenuData').then(res => {
          if(this.$store.getters.menuList){
                this.$nextTick(() => {
                this.$refs.sideMenu.updateOpenName(this.$route.name);
                });
          }
    })

这样无论跳转还是强制刷新，侧边栏菜单是会展开的，但是选中的子菜单
依旧没有高亮选中回显

可以在side-menu侧边栏菜单组件中加updateActiveName属性方法更新

this.$refs.menu.updateActiveName() //保持高亮选中

updateOpenName (name) {
      if (name === this.$config.homeName) this.openedNames = []
      else this.openedNames = this.getOpenedNamesByActiveName(name)
      if(this.activeName){
          this.$nextTick(() => {
           this.$refs.menu.updateActiveName() //保持高亮选中
        })
      }
    },

三，部分主要代码：

1.main.vue中：

import SideMenu from "./components/side-menu";

    <Sider
      hide-trigger
      collapsible
      :width="200"
      :collapsed-width="64"
      v-model="collapsed"
      class="left-sider"
      :style="{overflow: 'hidden'}"
    >
      <side-menu
        accordion
        ref="sideMenu"
        :active-name="activeName()"
        :collapsed="collapsed"
        @on-select="turnToPage"
        :menu-list="menuList"
      >
      </side-menu>
    </Sider>

2.side-menu组件中

<template>
  <div class="side-menu-wrapper">
    <slot></slot>
    <Menu ref="menu" v-show="!collapsed" :active-name="activeName" :open-names="openedNames" :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect">
      <template v-for="item in menuList">
        <template v-if="item.children && item.children.length === 1">
          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`"><common-icon :type="item.children[0].icon || ''"/><span>{{ showTitle(item.children[0]) }}</span></menu-item>
        </template>
        <template v-else>
          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ showTitle(item) }}</span></menu-item>
        </template>
      </template>
    </Menu>
    <div class="menu-collapsed" v-show="collapsed" :list="menuList">
      <template v-for="item in menuList">
        <collapsed-menu :center="true" v-if="item.children && item.children.length > 1" @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
        <Tooltip transfer v-else :content="showTitle(item.children && item.children[0] ? item.children[0] : item)" placement="right" :key="`drop-menu-${item.name}`">
          <a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{textAlign: 'center'}"><common-icon :right="0" :size="item.size" :color="textColor" :type="item.icon || (item.children && item.children[0].icon)"/></a>
        </Tooltip>
      </template>
    </div>
  </div>
</template>
<script>
import SideMenuItem from './side-menu-item.vue'
import CollapsedMenu from './collapsed-menu.vue'
import { getUnion } from '@/libs/tools'
import mixin from './mixin'
export default {
  name: 'SideMenu',
  mixins: [ mixin ],
  components: {
    SideMenuItem,
    CollapsedMenu
  },
  props: {
    menuList: {
      type: Array,
      default () {
        return []
      }
    },
    collapsed: {
      type: Boolean
    },
    theme: {
      type: String,
      default: 'dark'
    },
    rootIconSize: {
      type: Number,
      default: 20
    },
    iconSize: {
      type: Number,
      default: 16
    },
    accordion: Boolean,
    activeName: {
      type: String,
      default: ''
    },
    openNames: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      openedNames: [],
    }
  },
  methods: {
    handleSelect (name) {
      this.$emit('on-select', name)
    },
    getOpenedNamesByActiveName (name) {
      return this.$route.matched.map(item => item.name).filter(item => item !== name)
    },
    updateOpenName (name) {
      if (name === this.$config.homeName) this.openedNames = []
      else this.openedNames = this.getOpenedNamesByActiveName(name)
      if(this.activeName){
          this.$nextTick(() => {
           this.$refs.menu.updateActiveName()
        })
      }
    },
  },
  computed: {
    textColor () {
      return this.theme === 'dark' ? '#fff' : '#495060'
    }
    
  },
  watch: {
    activeName (name) {
      if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name)
      else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
    },
    openNames (newNames) {
      this.openedNames = newNames
    },
    openedNames () {
      this.$nextTick(() => {
        this.$refs.menu.updateOpened()
      })
    }
  },
  mounted () {
    this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
     
  }
}
</script>
<style lang="less">
@import './side-menu.less';
</style>

喜欢就多多点赞关注。
在这里插入图片描述