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

原创

于 2020-04-30 17:12:21 发布 · 3.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#avue #左侧菜单栏换为顶置菜单栏 #顶置菜单栏

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

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">
        <li v-for="(item,index) in menu[0].children" style="margin: 0 10px;">
          <div @click="chan