做项目时候sidebar遇到的思考总结1。

最新推荐文章于 2024-02-25 21:50:09 发布

xSing1e

最新推荐文章于 2024-02-25 21:50:09 发布

阅读量567

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_52310583/article/details/131802843

文章讲述了在Vue.js中构建sidebar组件的过程，包括组件拆分、路由处理、高亮显示以及动态组件的使用。通过动态组件和插槽优化代码结构，提高逻辑思维，并强调了逻辑编写和组件精细化拆分的挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做sidebar组件。

整体布局layout中，左侧sidebar 头上导航栏navbar 下面中间得appmain

左侧sidebar在做的时候，组件拆分。

layout中。

<sidebar v-if="!isLoginModule" class="sidebar-container" />

在sidebar中，拆分，每个sidebaritem项目。

sidebar中。

高亮，当前路由解构出meta看看if(meta.activeMenu) {return meta.activeMenu}

    <el-menu
        //点击的时候高亮
      :default-active="activeMenu"
        //是否折叠
      :collapse="true"
      background-color="#304156"
      text-color="#bfcbd9"
      :unique-opened="true"
      active-text-color="#409EFF"
      :collapse-transition="false"
      mode="vertical"
    >
      <sidebar-item
        v-for="route in permission_routes"
        :key="route.path"
        :item="route"
        :base-path="route.path"
      />
</el-menu>

sidebar-item 要传递数据（渲染），并且还有路由的路径（点击跳转路由。要判断是否有子菜单、一个还是多级菜单。

单个菜单，判断是内部链接还是外部链接放在applink中校验。applink中用动态组件(因为如果是外部链接那么为a标签，如果是内部渲染为router-link)并且有一插槽，

动态组件方法：

<component :="linkProps(to)">

<slot />

</component>

linkProps(url) {

if (Validator.isExternal(url)) {

return {

is: 'a',

href: url,

target: '_blank',

rel: 'noopener'

}

}

return {

is: 'router-link',

to: url

}

}

<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
<AppLink v-if="item.redirect!='noRedirect' && onlyOneChild.mata" :to="resolvePath(onlyOneChild.path)">
            <el-menu-item
                :index="resolvePath(onlyOneChild.path)"
                class="submenu-title-noDropdown"
                >
                <i class="el-icon-tickets" />
                {{ onlyOneChild.meta.title }}
            </el-menu-item>
</AppLink>

二级菜单：

拆分item组件（icon、title）和重复利用sidebar-item组件（数据为item.children，路由）

    <el-submenu
      v-else
      ref="subMenu"
      :index="resolvePath(item.path)"
      popper-append-to-body
    >
      <template slot="title">
        <item
          v-if="item.meta"
          :icon="item.meta && item.meta.icon"
          :title="item.meta.title"
        />
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      />
    </el-submenu>

item组件用了具名插槽插入。遍历数据。

总结到最后，其实想想这个组件还是比较容易得，难点大概就是写逻辑的时候写不太出来吧。还有组件拆分得时候。拆得很细腻，亮点的话我感觉是用到了插槽和动态组件。大大节约了这个代码量，同时提高了我的逻辑思维。

动态组件可以根据不同得条件组件自己渲染，插槽的话就是可以插入不同dom，给父元素占位，这是我以前做项目没接触到的。