如何优雅解决若依二级菜单名字过长问题：若依（RuoYi）菜单字体大小，菜单长度修改攻略

博主猫头虎的技术世界

🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能！

专栏链接：

🔗 精选专栏：

• 《面试题大全》 — 面试准备的宝典！
• 《IDEA开发秘籍》 — 提升你的IDEA技能！
• 《100天精通Golang》 — Go语言学习之旅！

领域矩阵：

🌐 猫头虎技术领域矩阵：
深入探索各技术领域，发现知识的交汇点。了解更多，请访问：

• 猫头虎技术矩阵
• 新矩阵备用链接

如何优雅解决若依二级菜单名字过长问题：菜单长度展示优化攻略 🐾

摘要

在使用若依框架过程中，经常遇到菜单名称太长导致显示不全的问题。本文详细介绍两种有效的解决策略，包括如何增加菜单列宽和使用文本框动态显示标签名称。本文适合对前端布局优化感兴趣的开发者，无论是初学者还是经验丰富的大佬。掌握这些技巧后，你将能够优化菜单展示，提升用户体验。关键词：若依框架、菜单展示优化、前端开发、界面布局、CSS。

引言

嗨，大家好！我是猫头虎博主，今天要和大家分享的是在使用若依框架时遇到的一个小挑战：菜单名称太长怎么办？这不仅是个美观问题，也关系到用户体验。接下来，让我们一起深入了解如何巧妙解决这个问题吧！🌟

正文

🐾 方案概览

在若依框架中，菜单名称过长是一个常见问题。本文将详细介绍两种解决方法：

1. 增加列宽
2. 动态显示标签名称
3. 增大或者减小全局字号

🐾 一、增加列宽（推荐）

修改路径

src--->assets--->styles--->variables.scss

$base-sidebar-width: 220px;

在这个文件中，我们可以调整菜单列的宽度。这是最直接的方法，但并不总是最有效的。因为如果菜单名称长度不一，单纯增加宽度可能无法完全解决问题。

🐾 二、动态显示标签名称

实现效果

通过动态显示标签，我们可以在不影响布局的前提下，展示完整的菜单名称。

实现代码

修改路径：
src—>layout—>Sidebar—>SidebarItem.vue

改为：

   <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
          <!-- <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" /> -->
          <el-tooltip class="item" effect="dark" :content="onlyOneChild.meta.title" placement="right-start">

            <span v-if="onlyOneChild.meta">

              <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" />

            </span>

          </el-tooltip>

        </el-menu-item>
      </app-link>

代码示例：

<el-tooltip class="item" effect="dark" :content="onlyOneChild.meta.title" placement="right-start">
  <span v-if="onlyOneChild.meta">
    <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)":title="onlyOneChild.meta.title" />
  </span>
</el-tooltip>

在这种方法中，我们使用了<el-tooltip>组件来动态显示菜单名称。当鼠标悬停在菜单项上时，会显示完整的菜单名称。

注意事项

在修改过程中，需要注意若依默认的鼠标展示值可能与我们设置的值发生重复。为此，需要适当调整以避免冲突。

路径：-> src–>layout–>Sidebar—>item.vue

🐾 小结

以上两种方法各有利弊。增加列宽简单直接，但不够灵活；而动态显示标签名称虽然复杂一些，但更加用户友好。根据具体的需求和场景选择合适的方法。

三、🐾 增大/缩小菜单字体

修改路径

src--->assets--->styles--->sidebar.scss
vue2-ui-Demo\src\assets\styles\sidebar.scss

    .el-menu-item, .el-submenu__title {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      font-size: 24px; // 修改左侧菜单字体大小，根据实际需求调整
    }

IDE代码位置图：

小结

在本节中，我们探讨了如何调整 Vue2 UI 演示项目中侧边栏菜单的字体大小。具体的修改步骤如下：

1. 文件路径：首先，需要定位到文件 sidebar.scss，其位于路径 vue2-ui-Demo\src\assets\styles\ 下。

2. 代码修改：在该文件中，对 .el-menu-item 和 .el-submenu__title 类的样式进行了调整。主要修改是设置 font-size 为 24px，这是菜单项的新字体大小。此外，还设置了 overflow, text-overflow, 和 white-space 属性以确保文本的正确显示。

3. 自定义：这个字体大小是可根据项目的实际需求进行调整的，因此开发者可以根据具体情况自行修改这个值。

通过以上步骤，可以有效地增大或缩小 Vue2 UI 项目中侧边栏菜单的字体大小，以达到更佳的用户界面体验。

四、🐾 若依菜单拖拽实现方案（仅供参考，还没有完全实现）

目录： vue3-ruoyi-ui\src\layout\components\Sidebar\index.vue

<template>
  <div class="container">
    <div :class="{ 'has-logo': showLogo }"
      :style="{ width: menuWidth, backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
      <logo v-if="showLogo" :collapse="isCollapse" />
      <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
        <el-menu :default-active="activeMenu" :collapse="isCollapse"
          :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
          :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" :unique-opened="true"
          :active-text-color="theme" :collapse-transition="false" mode="vertical">
          <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route"
            :base-path="route.path" />
        </el-menu>
      </el-scrollbar>


    </div>
    <div class="drag-bar" @mousedown="startResize"></div>

  </div>
</template>

<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'

const route = useRoute();
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()

const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);

const activeMenu = computed(() => {
  const { meta, path } = route;
  // if set path, the sidebar will highlight the path you set
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})



// 增加拖拽相关的响应式数据
const resizing = ref(false);
const menuWidth = ref('200px'); // 初始菜单宽度

// 开始调整大小
// 开始调整大小
function startResize(event) {
  resizing.value = true;
  console.log("开始调整大小"); // 用于调试
  resizing.value = true; // 设置正在调整大小的标志
  event.preventDefault(); // 防止默认事件干扰
  const startX = event.clientX;
  const startWidth = parseInt(menuWidth.value, 10);
  

  function handleMouseMove(e) {
    e.preventDefault();
    console.log("正在调整大小"); // 用于调试
    if (!resizing.value) return; // 确保在拖拽状态时才调整大小
    const currentWidth = startWidth + e.clientX - startX;
    menuWidth.value = `${currentWidth}px`;
  }

  function handleMouseUp() {
    resizing.value = false;
    console.log("调整大小结束"); // 用于调试
    // 移除监听器
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
  }

  window.addEventListener('mousemove', handleMouseMove);
  window.addEventListener('mouseup', handleMouseUp);
}


// 监听 mousemove 和 mouseup 事件

</script>
<style scoped>
.drag-bar {
  width: 15px;
  /* 可以适当增加宽度，确保容易拖拽 */
  height: 100%;
  /* 确保高度足够 */
  cursor: ew-resize;
  position: absolute;
  /* 可能需要绝对定位来正确放置 */
  right: 0;
  /* 根据实际布局调整 */
  top: 0;
  /* 根据实际布局调整 */
}

.container {
  display: flex;
  position: relative;
  /* 为了绝对定位拖拽条 */
}
</style>

参考资料

1. 若依官方文档
2. Vue.js文档
3. Element UI组件库

核心知识点表格

总结

处理菜单名称过长的问题是提升用户体验的一个细节，但非常关键。希望本文介绍的两种方法能帮助你优化若依框架的菜单展示。如果你对本文内容有任何疑问，欢迎点击下方名片，了解更多详细信息！

感谢阅读，我们下次见！喵~ 🐱

👉 更多信息：有任何疑问或者需要进一步探讨的内容，欢迎点击下方文末名片获取更多信息。我是猫头虎博主，期待与您的交流！ 🦉💬

🚀 技术栈推荐：
GoLang, Git, Docker, Kubernetes, CI/CD, Testing, SQL/NoSQL, gRPC, Cloud, Prometheus, ELK Stack

💡 联系与版权声明：

📩 联系方式：

• 微信: Libin9iOak
• 公众号: 猫头虎技术团队

⚠️ 版权声明：
本文为原创文章，版权归作者所有。未经许可，禁止转载。更多内容请访问猫头虎的博客首页。

点击下方名片，加入猫头虎领域社群矩阵。一起探索科技的未来，共同成长。