Vue element响应式布局导航栏递归生成.el-submenu .el-menu-item里面出现min-width:200px样式穿透问题.

最新推荐文章于 2025-04-03 11:32:23 发布

原创最新推荐文章于 2025-04-03 11:32:23 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui

在使用Vue和ElementUI构建的前端项目中，遇到递归生成的导航栏因ElementUI的.min-width:200px样式导致二级菜单宽度异常。分析原因是导航栏的响应式布局和递归组件。解决方法是利用Vue的<style>标签配合不同的样式穿透技巧（css使用>>>，less使用/deep/，scss使用::v-deep），避免样式穿透，成功调整下级导航栏的宽度。

问题发现处：可以看出二级导航栏多出有点宽度，样式里面有一个min-width:200px

分析问题的原因：导航栏布局是采用element的响应式布局并且是封装成组件递归调用出来的下级导航栏，方便以后调用接口动态渲染导航栏。但是因为elementui导航样式默认最小宽度200px。所以后面递归生成的子组件的宽度就成了200px.

<template>
  <div>
    <el-row
      ><el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
        ><Logo class="logo"></Logo></el-col
    ></el-row>
    <el-row>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
        ><Sidebar :menus="menus"></Sidebar
      ></el-col>
      <el-col :xs="16" :sm="18" :md="20" :lg="21" :xl="23">
        <el-row><Breadcrumb></Breadcrumb></el-row>
        <el-row
          ><div class="app_main"><router-view></router-view></div
        ></el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Sidebar from "@/layout/components/Sidebar";
import Logo from "@/layout/components/Logo.vue";
import Breadcrumb from "@/layout/components/Breadcrumb";

export default {
  components: { Sidebar, Logo, Breadcrumb },
  data() {
    return {
      menus: [
        {
          title: "首页",
          menuCode: "1",
          index: "/",
        },
        {
          title: "个人管理",
          menuCode: "2",
          index: "1",
          childre: [
            {
              title: "项目管理",
              menuCode: "1.1",
              index: "1.1",
              childre: [
                {
                  title: "竞赛项目",
                  menuCode: "1.1.1",
                  index: "1.1.1",
                },
              ],
            },
            {
              title: "期末设计",
              menuCode: "1.2",
              index: "1.3",
            },
          ],
        },
        {
          title: "课表",
          menuCode: "3",
          index: "/Timetable",
        },
        {
          title: "记事本(Notepad)",
          menuCode: "4",
          index: "/Notepad",
        },
        {
          title: "学习资料库",
          menuCode: "5",
          index: "/learningDatabase",
        },
        {
          title: "学习论坛",
          menuCode: "6",
          index: "/Forum",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.app_main {
  height: calc(100vh - 0px);
  padding: 10px 20px;
  overflow-y: scroll;
  overflow-x: hidden;
}
// 解决组件传透问题
::v-deep {
  .el-submenu .el-menu-item {
    min-width: 191px ;
  }
}
</style>

解决办法：由于是递归生成的下级导航栏会出现样式穿透的问题

vue中针对不同的样式类型(css,less,scss)有不用的样式穿透方法。

css 使用 >>>
less 使用 /deep/
scss 使用 ::v-deep

// 解决组件传透问题
::v-deep {
  .el-submenu .el-menu-item {
    min-width: 191px ;
  }
}

这样子后面的下级导航栏的宽度就可以改变了！