Vue实现可折叠导航菜单~非常详细

通过Vue编写一个二级，并且是可以折叠的导航菜单

文章目录

思路
在main.js中配置axios
导入element样式
Home.vue实现静态页面、样式及功能

思路

在侧边栏区域只写了一个二级导航，通过axios获取到侧边栏的数据，通过v-fot循环渲染该数据，形成多个二级菜单
使用elemen-ui进行样式的设置

在main.js中配置axios

导入axios包
配置请求的根路径
把axios包挂载到vue原型对象上：这样每一个vue组件都可以通过this直接访问到$http，从而去发起ajax请求

// 导入axios包
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 把axios包挂载到vue原型对象上
Vue.prototype.$http = axios

在全局使用axios，结合 vue-axios使用

import axios from 'axios'
import VueAxios from 'vue-axios'Vue.use(VueAxios,axios);

导入element样式

plugins文件夹下的element.js文件：
进行按需导入，用到了element-ui中的什么样式就导入什么样式

import Vue from 'vue'
import {Main,Menu,Submenu,MenuItem
} from 'element-ui'// 注册组件
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)

Home.vue实现静态页面、样式及功能

获取到的菜单数据：

实现方式：

以第一个二级菜单为例：

实现左侧二级菜单的代码：
home.vue文件：

<!-- 侧边栏菜单区域 --><el-menubackground-color="#333744"text-color="#fff"active-text-color="#ffd04b"><!-- 一级菜单 --><!-- 在获取到“左侧菜单”的数据后， 使用 v-for循环 渲染 一级菜单 --><!-- :index="item.id + ''" index的值是用于区分不同导航的，每个一级导航都有一个自己的index值 --><!-- "item.id + '' ；数值 + 空字符串 得到的是 字符串 （index的值必须是字符串类型的）: 表示 动态数据绑定, 操作一个二级惨淡，不会影响另一个二级菜单--><el-submenu:index="item.id + ''"v-for="item in menulist":key="item.id"><!-- 一级菜单的模板区域 --><template slot="title"><!-- 图标 --><i class="el-icon-location"></i><!-- 文本 --><span>{{ item.authName }}</span></template><!-- 二级菜单 --><el-menu-item:index="subItem.id + ''"v-for="subItem in item.children":key="subItem.id"><!-- 图标 --><i class="el-icon-location"></i><!-- 文本 --><span>{{ subItem.authName }}</span></el-menu-item></el-submenu></el-menu>

一级菜单使用的是阿里的图标库，二级菜单使用的是element-ui的图标

home.vue文件

<el-container><!-- 侧边栏区域 --><!-- isCollapse 是否折叠也决定了侧边栏的宽度 --><!-- 折叠 true，侧边栏的宽度是64px展开 false（默认），侧边栏的宽度是200px--><el-aside :width="isCollapse ? '64px' : '200px'"><!-- toggle-button按钮 是 用于 设置 左菜单栏折叠展开的 --><div class="toggle-button" @click="toggleCollapse">|||</div><!-- 侧边栏菜单区域 --><!-- unique-opened 只保持一个子菜单 --><!-- unique-opened 与  :unique-opened="true" 是等效的加上 冒号: ， true false 就是布尔值不加 冒号: ， true false 就是字符串 --><!-- collapse 设置 折叠 或 展开 * 值为true， 折叠* 值为false，展开--><!-- collapse-transition 是否取消 折叠动画取消折叠动画后，效果会更好--><el-menubackground-color="#333744"text-color="#fff"active-text-color="#409eff"unique-opened:collapse="isCollapse":collapse-transition="false"><!-- 一级菜单 --><!-- 在获取到“左侧菜单”的数据后， 使用 v-for循环 渲染 一级菜单 --><!-- :index="item.id + ''" index的值是用于区分不同导航的，每个一级导航都有一个自己的index值 --><!-- "item.id + '' ；数值 + 空字符串 得到的是 字符串 （index的值必须是字符串类型的）: 表示 动态数据绑定, 操作一个二级惨淡，不会影响另一个二级菜单--><el-submenu:index="item.id + ''"v-for="item in menulist":key="item.id"><!-- 一级菜单的模板区域 --><template slot="title"><!-- 图标 --><i :class="iconsObj[item.id]"></i><!-- 文本 --><span>{{ item.authName }}</span></template><!-- 二级菜单 --><el-menu-item:index="subItem.id + ''"v-for="subItem in item.children":key="subItem.id"><!-- 图标 --><i class="el-icon-menu"></i><!-- 文本 --><span>{{ subItem.authName }}</span></el-menu-item></el-submenu></el-menu></el-aside><el-main>Main</el-main></el-container><style>
// 左侧菜单栏折叠展开按钮 的 样式
.toggle-button {background-color: #4a5064;font-size: 10px;line-height: 24px;color: #fff;text-align: center;// 设置内容|||之间的距离letter-spacing: 0.2em;cursor: pointer;
}
</style>

Vue实现可折叠导航菜单~非常详细相关推荐

vue、Menu 导航菜单、Menu属性事件、vue Menu 全部导航菜单、vue Menu 全部属性事件
vue.Menu 导航菜单.Menu属性事件.vue Menu 全部导航菜单.vue Menu 全部属性事件设计规则何时使用代码演示顶部导航内嵌菜单缩起内嵌菜单只展开当前父级菜单垂直菜 ...
Vue之ElementUI导航菜单
参考如下: https://element.eleme.io/#/zh-CN/component/menu 先直接遍历路由列表,显示需要显示的导航元素. <el-menu :default-ac ...
vue+elementUI项目中使用NavMenu导航菜单
vue+elementUI项目中使用NavMenu 导航菜单在elementUI官网组件中NavMenu 导航菜单的使用只是简单地运用,在实践项目中还需要配合路由配置.一般后台管理系统不只是导航菜单 ...
Vue前端项目-主页布局-左侧导航菜单（静态）
目录 1.修改侧边栏组件 2.滚动条样式 3.导入并使用组件实现效果: NavMenu 的详细用法: https://element.eleme.cn/#/zh-CN/component/menu ...
vue制作导航栏html,Vue如何实现导航栏菜单的方法
Vue如何实现导航栏菜单的方法发布时间:2020-08-20 09:42:45 来源:亿速云阅读:235 作者:小新这篇文章将为大家详细讲解有关Vue如何实现导航栏菜单的方法,小编觉得挺实用的, ...
ant-design-vue导航菜单a-menu的详细使用
ant-design-vue导航菜单a-menu的详细使用一.效果一.关键的API 二.注意事项三.代码此文章包含了递归生成三级菜单,刷新状态保留,只展开一个父级菜单等常见问题. 一.效果可 ...
vue项目-element UI-NavMenu 导航菜单始终只展开一个
vue项目-element UI-NavMenu 导航菜单始终只展开一个全局搜索:unique-opened找到该配置将其改成true unique-opened:是否只保持一个子菜单的展开 < ...
vue 用户点击不同的导航菜单，显示对应菜单所展示的区域
情景: 导航栏在一个单独组件NavigationBar/index.vue,中间的内容区也是一个单独组件ContentComponents/index.vue,但这个组件都是属于Home子组件,Nav ...
vue项目中引入阿里 iconfont 图标动态渲染导航菜单图标
vue + element 后台项目,项目中都是用的 element-ui 的图标但是导航菜单是通过后台数据渲染的,所以在阿里图标库找了图标给后台,再渲染步骤一: 在图标库找到想要的图标,加入购物 ...

Vue实现可折叠导航菜单~非常详细

文章目录

思路

在main.js中配置axios

导入element样式

Home.vue实现静态页面、样式及功能

Vue实现可折叠导航菜单~非常详细相关推荐

最新文章

热门文章

Vue实现可折叠导航菜单~非常详细

文章目录

思路

在main.js中 配置axios

导入element样式

Home.vue实现静态页面、样式及功能

Vue实现可折叠导航菜单~非常详细相关推荐

最新文章

热门文章

在main.js中配置axios