优化菜单名称过长悬停显示标题

RuoYi

2022-03-15 72f35742d470d3e85c59ab23272bd41f6eea7ac3

优化菜单名称过长悬停显示标题

 src/assets/styles/sidebar.scss

@@ -70,7 +70,7 @@
      width: 100% !important;

    }



    .el-menu-item, .el-sub-menu__title {

    .el-menu-item, .menu-title {

      overflow: hidden !important;

      text-overflow: ellipsis !important;

      white-space: nowrap !important;


 src/layout/components/Sidebar/SidebarItem.vue

@@ -4,7 +4,7 @@
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">

        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">

          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>

          <template #title>{{ onlyOneChild.meta.title }}</template>

          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>

        </el-menu-item>

      </app-link>

    </template>

@@ -12,7 +12,7 @@
    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>

      <template v-if="item.meta" #title>

        <svg-icon :icon-class="item.meta && item.meta.icon" />

        <span>{{ item.meta.title }}</span>

        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>

      </template>



      <sidebar-item

@@ -91,4 +91,12 @@
  }

  return getNormalPath(props.basePath + '/' + routePath)

}



function hasTitle(title){

  if (title.length > 5) {

    return title;

  } else {

    return "";

  }

}

</script>