avue框架将左侧菜单栏换为顶置菜单栏

最新推荐文章于 2024-08-09 07:48:06 发布

指标满载

最新推荐文章于 2024-08-09 07:48:06 发布

阅读量3.1k

点赞数

文章标签： avue 左侧菜单栏换为顶置菜单栏顶置菜单栏

本文链接：https://blog.csdn.net/weixin_44770377/article/details/105865527

版权

本文介绍了如何将avue框架的默认左侧边栏菜单改造为顶置菜单栏。通过注释原有左侧边栏，创建新的顶置菜单组件topMenuList，并在顶部文件中引入该组件来实现改造。

摘要由CSDN通过智能技术生成

avue默认的左侧边栏如下：
在这里插入图片描述

修改为顶置菜单栏效果如下：
在这里插入图片描述
如何实现的？
一、先注释左侧边栏的部分

二、新建一个子组件topMenuList

<template>
  <div>
    <div style="display: flex;height: 60px;align-items: center;background-color:transparent;">
      <img style="width: 40px;height: 40px;" src="../../../public/img/slaw_logo.png"/>
      <ul style="display: flex;width: 100%;height: 100%;align-items: center;font-size:16px;" class="el-dropdown">
        <