Vant Collapse 移动端递归菜单

╰半橙微兮° 2023-01-15 08:30 251阅读 0赞

// 控制只打开一个
        onCollapseOpen(openKeys) { 
          const latestOpenKey = openKeys.find(
            (key) => this.openKeys.indexOf(key) === -1
          );
          if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) { 
            this.openKeys = openKeys;
          } else { 
            setTimeout(() => { 
              this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            });
          }
        },

全部代码

<template>
      <div id="vb-menu-warp">
        
        
        <van-collapse v-model="openKeys" @change="onCollapseOpen">
          <van-collapse-item
            :title="item.name"
            :name="item.resId"
            v-for="item in info.formService.menuList"
            :key="item.resId"
          >
            <li v-if="!item.subResList.length">内容</li>
            <sub-menu
              v-else
              :key="item.resId"
              :menu-info="item"
              :layer="layer + 1"
              class="work-first-menu"
            />
          </van-collapse-item>
        </van-collapse>
      </div>
    </template>
    
    <script>
    import OtherService from "services/OtherService";
    import IndexController from "controllers/IndexController";
    import {  CollapseItem } from "vant";
    /* 递归子组件 */
    const SubMenu = { 
      template: ` <van-collapse-item :key="menuInfo.resId" v-bind="$props" v-on="$listeners"> <span slot="title"> <span :style="'font-size: 15px;' + 'margin-left:' + (layer * 15) +'px'">{ { menuInfo.name }}</span> </span> <template v-for="item in menuInfo.subResList"> <li v-if="!item.subResList.length" :key="item.resId" @click="onTitleClick(item)"> <span :style="'font-size: 15px;' + 'margin-left:' + (layer * 20) +'px'">{ { item.name }}</span> </li> <sub-menu v-else :key="item.resId" :layer="layer + 1" :menu-info="item" /> </template> </van-collapse-item> `,
      name: "SubMenu",
      isSubMenu: true,
      props: { 
        ...CollapseItem.props,
        menuInfo: { 
          type: Object,
          default: () => ({ }),
        },
        layer: { 
          type: Number,
          default: 1,
        },
      },
      data() { 
        return { 
          data: new IndexController(new OtherService()),
          mariginLeft: 15,
        };
      },
      methods: { 
        onTitleClick(e) { 
          const type = e.linkType;
          const resId = e.resId;
          const appId = this.$storage.get("appId");
          if (type === 1) { 
            this.$router.push({ 
              path: "/home/table/" + resId,
            });
          } else if (type === 0 || type === 3) { 
            this.$storage.set("isRes", "isRes");
            this.$router.push(`/home/form/${ resId}/1/1/1`);
          }
        },
      },
    };
    export default { 
      name: "",
      data() { 
        return { 
          info: new IndexController(new OtherService()),
          rootSubmenuKeys: [], // 所有的
          openKeys: [], // 打开的
          fieldValue: "",
          layer: 1,
        };
      },
      components: { 
        "sub-menu": SubMenu,
      },
      mounted() { 
        this.init();
      },
      methods: { 
        /* 初始化数据 */
        async init() { 
          let {  info } = this;
          await info.getMenuList();
          this.rootSubmenuKeys = info.formService.keyRoots;
        },
        // 控制只打开一个
        onCollapseOpen(openKeys) { 
          const latestOpenKey = openKeys.find(
            (key) => this.openKeys.indexOf(key) === -1
          );
          if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) { 
            this.openKeys = openKeys;
          } else { 
            setTimeout(() => { 
              this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            });
          }
        },
      },
    };
    </script>
    
    <style  lang='scss'>
    @import "style/vbmenu/VbMenu.scss";
    </style>

效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70]: /images/20221022/05a0b12347384006a296413fd5b01b07.png