MecuryJerry 2021-11-02 20:22 采纳率: 75%
浏览 25
已结题

导航栏根据屏幕宽度动态渲染

我现在有一个导航栏,我想根据用户的屏幕大小动态的渲染出来这些菜单,放不下的就放在更多下拉菜单里

img


我现在是分了两个数组去存放菜单数据,一个是显示在导航栏上的,一个是放不下隐藏起来的。请问该怎么实现?

menuList: [
        { id: "1", pid: "0", name: "首页", url: "/home", icon: "el-icon-s-home", },
        { id: "3", pid: "0", name: "菜单管理", url: "/menuMangement", icon: "el-icon-s-data", },
        { id: "4", pid: "0", name: "权限管理", url: "/menuAuthority", icon: "el-icon-s-platform", },
        { id: "5", pid: "0", name: "信息栏目维护", url: "/infoMaintenance", icon: "el-icon-s-claim", },
        { id: "6", pid: "0", name: "信息发布", url: "/infoPublish", icon: "el-icon-s-platform", }
      ],
      hideMenu: [
        { id: "2", pid: "0", name: "个人中心", url: "/personalPortal", icon: "el-icon-s-grid", },
        { id: "7", pid: "0", name: "常用联系人维护", url: "/contacts", icon: "el-icon-s-platform", }
      ]
  • 写回答

1条回答 默认 最新

  • pp泉 2021-11-03 08:48
    关注

    使用媒体查询

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月30日
  • 修改了问题 11月2日
  • 创建了问题 11月2日