1、顶栏常单独形成一个组件,因此在src文件夹下的components文件夹中新建CommonHeader.vue
相关代码如下:【注意,由于顶栏的左侧区域和右侧区域经常分装,以实现不同功能】
<template>
<div class="header-container">
<!-- 顶栏的左侧内容 -->
<div class="l-content"></div>
<!-- 顶栏的右侧内容 -->
<div class="r-content"></div>
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
2、在Main.vue中注册CommonHeader.vue组件并使用
打开页面,并根据UI修改样式
3、下面介绍本节重点:基于Vuex实现顶栏按钮实现左侧导航栏收起
首先进行准备工作,搜索vuex官方文档
打开官网,选择vuex为3.x版本【本项目基于vue2实现开发】
Vuex 是 Vue.js 应用程序的状态管理模式 + 库。它充当应用程序中所有组件的集中存储。
4、向项目中引入vuex【注意:一定要确定版本的正确性!可打开npm官网确定vuex的版本号】打开vscode终端,向指定目录下输入如下命令:
npm i [email protected]
安装完成
在src文件夹下新建store文件夹,创建index.js文件,代码如下:
/* eslint-disable no-unused-vars */
//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
//将vuex进行全局部署
Vue.use(Vuex)
//创建vuex的示例
//引入tab后,将该实例对外暴露
export default new Vuex.Store({
modules: {
}
})
//注意,该部分内容最终要由main.js挂载到vue实例上
由于左侧菜单是单独部分的数据,而顶栏也是,因此根据模块化的思想需要将两部分数据进行封装管理,需要再在store文件夹下新建tab.js文件。
根据【完整项目搭建】④和⑥介绍可知,左侧导航栏菜单的收起是通过操作isCollapse实现的
(62条消息) 【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——④项目开发基于vue-router【嵌套路由】实现导航栏切换效果_小蛋蛋呐的博客-CSDN博客
(62条消息) 【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——⑥项目开发基于实现菜单单击跳转功能_小蛋蛋呐的博客-CSDN博客
现在需要在CommonHeader组件中点击icon图标,实现左菜单导航栏收起功能,则需在store中的tab.js设置控制菜单收起展开的isCollapse字段,并在CommonAside.vue和CommonHeader.vue组将中进行引用,综上tab.js文件的代码如下:
export default {
state: {
//在CommonAside通过操控collapse属性实现左侧菜单导航栏的收起和展开
//isCollapse是collapse属性的属性值
isCollapse: false
},
mutations: {
//修改菜单展开收起的方法
collapseMenu(state) {
state.isCollapse = !state.isCollapse;
}
}
}
tab.js文件写好后,在store文件夹下的index.js文件中引用
/* eslint-disable no-unused-vars */
//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab.js'
//将vuex进行全局部署
Vue.use(Vuex)
//创建vuex的示例
//引入tab后,将该实例对外暴露
export default new Vuex.Store({
modules: {
tab
}
})
//注意,该部分内容最终要由main.js挂载到vue实例上
将vuex实例对外暴露后,还需要在main.js文件中进行挂载
import Vue from 'vue'
import App from './App.vue'
//全局引入element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入iconfont字体图标
import "./assets/font/iconfont.css"
//引入router
import router from './router'
//引入store
import store from './store'
//对element ui进行全局注册
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
在CommonHeader.vue中对应部分定义点击事件handleMenu
在methods中定义该方法,使用vuex自身的commit方法调用store文件夹下定义的方法
在CommonAside.vue组件中获取store中的state,从而获取isCollapse字段
在template的部分中进行使用
此时 点击icon图标,即可实现左侧导航栏的收起功能
解决:顶栏在左侧菜单导航栏收起时自动填充整个顶部,设置el-aside的width为auto
解决:左侧菜单导航栏在搜索时只有字发生变化,注意el-menu不可以设置固定宽度