5-5 使用vuex实现切换tab页功能
目录:
- 实现Tab页面功能
- 实现步骤
一、实现Tab页面功能
二、实现步骤
目录结构:
... -src -common -Aside.vue -Header.vue -Tab.vue //定义Tab.vue -store -modules -tab.js //定义tabsList -index.js -views -Main.vue //导入Tab.vue -App.vue -main.js -routes.js ....
步骤详情:
- 在 Main.vue中引入 Tab.vue组件(引用element-ui中的 tag标签)
- 在 Vuex中定义存储标签的 tagList,方便非父子传递数据
- 定义 vuex 中侧边栏 点击后将菜单加入到 tagList中的方法
- 定义 vuex 中点击标签后触发删除的方法
2.1、创建Tab.vue组件,并且在Main.vue中引入
创建Tab.vue组件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="tabs"> <!--大小 size='small'--> <!--v-for遍历tags--> <!--首页不能删除 :closable="tag.name !== 'home'"--> <el-tag :key="tag.name" size="small" v-for="tag in tags" :closable="tag.name !== 'home'" :disable-transitions="false" @close="handleClose(tag)"> {{tag.label}} </el-tag> </div> </template> <script> import { mapState, mapMutations } from 'vuex' //引入vuex中的mapState,mapMutations export default { computed:{ ...mapState({ //获取tabsList,在module中,则获取 state.tab.tabsList tags: state => state.tab.tabsList }) }, data() { return { dynamicTags: ['标签一', '标签二', '标签三'], inputVisible: false, inputValue: '' }; }, methods: { ...mapMutations({ //调用vuex中的close方法 close: 'closeTab' }), handleClose(tag) { this.close(tag) } } } </script> <style scoped> .tabs { /*调整tabs样式*/ padding: 20px; } .tabs .el-tag { margin-right: 15px; } </style>
在 Main.vue 中导入
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <el-container style="height: 100%"> ..... <Tab></Tab> <el-main>Main</el-main> ..... </template> <script> .... import Tab from '../common/Tab.vue' export default { components:{ ...., Tab } } </script> <style scoped> .... </style>
2.2、在 Vuex中定义存储标签的 tagList
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
const state = { menu: [], currentMenu: null, tabsList: [ { path: '/', name: 'home', label: '首页', icon: 's-home' }, ] }; const mutations = { selectMenu(state,val){ //val.name != 'home' ? state.currentMenu = val:state.currentMenu = null; if(val.name != 'home'){ state.currentMenu = val; let result = state.tabsList.findIndex(item => item.name === val.name); result === -1 ? state.tabsList.push(val) : '' }else { state.currentMenu = null; } }, closeTab(state,val){ let result = state.tabsList.findIndex(item => item.name === val.name); state.tabsList.splice(result,1); } }; const actions = { }; export default { state, mutations, actions }