• iview可收缩侧边菜单实现(支持二级菜单)


    想用iview做一个可以伸缩的侧边菜单栏,效果如下:

      1.侧边栏收缩前:可以通过点击菜单分类展开子菜单项;

      2.可以让用户点击图标动态收缩菜单栏;

      3.侧边栏收缩后:只显示菜单分类的图标,鼠标放置在菜单分类上后右侧展示子菜单项目。

           

     一、初探

      仔细看了iview的菜单组件,菜单组件本身不支持伸缩(element UI、antd是有现成组件的),看了一下layout组件(https://www.iviewui.com/components/layout)可以实现动态收缩侧边栏(侧边栏伸缩同时隐藏菜单项的文字实现菜单收缩)。但这种方法只是单纯的将一级分类菜单隐藏了,示例中是只有一级菜单,自己套入二级菜单后惨不忍睹。

    二、研究思考

      百度了一堆iview伸缩菜单的实现方式,发现有的人在侧边栏收缩后二级菜单能正常显示,心里就想莫非这些人是用是收费的UI Pro,于是就打开了UI Pro的网址(https://pro.iviewui.com/pro/introduce)。你猜怎么着!Pro的网站侧边栏就是我们想要的效果,翻了一下Pro的组件也没有可伸缩的菜单组件啊~  看来只能自己实现了,不过好在可以拿Pro的的做参考研究。

      观察发现侧边栏收起来后:1)当菜单分类下没有子菜单时,右边弹出的是一个tooltip组件 2)当菜单分类下有子菜单时,右边弹出的是dropdown组件。

    三、实现

      将菜单放到menu数组中,通过children属性设置菜单分类的子菜单,template部分对menu进行遍历,通过判断当前条件(侧边栏是否收缩、当前分类是否有子菜单)放置不同的组件,实现侧边菜单的动态伸缩展示。存在如下4种情况:

      1.菜单展开时,当前菜单分类没有子菜单,使用MenuItem组件。

      2.菜单展开时,当前菜单分类有子菜单,使用Submenu组件。

      3.菜单收缩时,当前菜单没有子菜单,使用Tooltip组件。

      4.菜单收缩时,当前菜单有子菜单,使用Dropdown组件。

    template部分代码如下

    <Menu
              active-name="home"
              :open-names="['home']"
              :theme="menuTheme"
              width="auto"
              :class="menuitemClasses"
              accordion
            > 
              <template v-for="(item, componentIndex) in menu">
                <!-- 展开并且有子菜单 -->
                <Submenu v-if="!isCollapsed && item.children.length" v-bind:key="componentIndex" :name="componentIndex">
                  <template slot="title">
                    <Icon :type="item.icon" />
                    <span>{{ item.name }}</span>
                  </template>
                  <MenuItem v-for="(children, index) in item.children" :key="index" :name="children.to" :to="children.to">
                    {{ children.name }}
                  </MenuItem>
                </Submenu>
    
                <!-- 展开但没有子菜单 -->
                <MenuItem v-else-if="!isCollapsed" :name="item.to" :to="item.to" v-bind:key="componentIndex">
                  <Icon :type="item.icon" />
                  <span>{{ item.name }}</span>
                </MenuItem>
    
                <!-- 不展开有子菜单 -->
                <Dropdown v-else-if="isCollapsed && item.children.length" v-bind:key="componentIndex" placement="right-start" class="menu-dropdown">
                  <MenuItem :name="item.to" :to="item.to" >
                    <Icon :type="item.icon" />
                    <span>{{ item.name }}</span>
                  </MenuItem>
                  <DropdownMenu slot="list">
                      <DropdownItem v-for="(children, index) in item.children" :key="index" style="padding: 0 0; background-color:#515a6e;">
                        <MenuItem :name="children.to" :to="children.to">{{ children.name }}</MenuItem>
                      </DropdownItem>
                  </DropdownMenu>
                </Dropdown>
    
                <!-- 不展开无子菜单 -->
                <Tooltip v-else-if="isCollapsed" :content="item.name" placement="right" v-bind:key="componentIndex">
                    <MenuItem :name="item.to" :to="item.to">
                      <Icon :type="item.icon" />
                      <span>{{ item.name }}</span>
                    </MenuItem>
                </Tooltip>
              </template>
            </Menu>
    

     data部分菜单定义代码如下

    data() {
        return {
          isCollapsed: false,
          keepAliveList: [],
          title: "Home",
          showSettingPage: false,
          showSuggestionPage: false,
          menu: [
            {
              name: "主页",
              to: "home",
              icon: "md-apps",
              children: []
            },
            {
              name: "菜单分类1",
              to: "user",
              icon: "ios-create-outline",
              children: [
                {
                  name: "子菜单1",
                  to: "user"
                },
                {
                  name: "子菜单2",
                  to: "menu"
                },
                {
                  name: "子菜单3",
                  to: "shared_report"
                },
                
              ]
            },
            {
              name: "菜单分类2",
              to: "user2",
              icon: "ios-archive-outline",
              children: [
                {
                  name: "子菜单2-1",
                  to: "firewall"
                },
                {
                  name: "子菜单2-2",
                  to: "navi_page"
                }
              ]
            }
          ]
        };
      },
    

      

    四、优化

      能够看到这里,说明你也是个前端高手。当侧边栏收缩时,还有如下几个优化项大概提一下,给个方向:

      1.dropdown menu背景颜色与侧边栏不一致。

      2.dropdown menu上放置鼠标后,有其他颜色出现。—— menuItem的li元素有padding

      3.dropdown menu显示区域与侧边菜单有重叠。—— dropdown menu中的ivu-dropdown-rel宽度没有完全占满父元素导致,可以通过设置有宽度的透明的右边框解决。

      

  • 相关阅读:
    做题经验
    4906 删数问题
    1225 八数码难题
    1005 生日礼物
    1004 四子连棋 未完成
    1008 选数 2002年NOIP全国联赛普及组
    1068 乌龟棋 2010年NOIP全国联赛提高组
    2292 图灵机游戏
    实战数据结构(9)_单链表实现多项式的相乘
    最近招两个兼职的活(PHP和JSP)
  • 原文地址:https://www.cnblogs.com/wurijie/p/12070196.html
Copyright © 2020-2023  润新知