【七】 tab-bar 导航 vue3 + ts + element-plus 项目实战 (后台管理系统)

1 store 设置 。

export type ItabItem = {
    name:string,
    title:string
}

export interface iTabState {
    tabsList:Array<ItabItem>
}

export const tabStore =  {
    namespaced: true,
    state:{
        tabsList:[]
    },
    mutations:{
      //添加tab
      addTab(state:iTabState, tab:ItabItem) {
        const isSome = state.tabsList.some((item) => item.name == tab.name)
        if(!isSome) {
          state.tabsList.push(tab)
        }
      },

      // 删除tab
      closeCurrentTab(state:iTabState,targetName:string) {
          const index = state.tabsList.findIndex((item)=> item.name == targetName)
          state.tabsList.splice(index,1)
      },
  },

  getters:{
    //获取 tabs
    getTabs(state:iTabState) {
        return state.tabsList
    }
  }
}

2 TabBar.vue

2.1 模版 。

<template>
  <el-tabs
    v-model="activeKey"
    type="card"
    closable  
    @tab-click="clickHandle"
    @tab-remove="removeTab"
  >
    <el-tab-pane
      v-for="item in tabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      {{ item.content }}
    </el-tab-pane>
  </el-tabs>
</template>

2.2 js脚本。.

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { useStore } from '@/store';
import { computed } from '@vue/reactivity';
import {useRoute, useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter();
const store = useStore();

console.log('@', store)

//添加选项卡。
const addTab =()=>{
  store.commit(
     'tabStore/addTab', 
      {
        name:route.name,
        title:route.meta?.title
      }
  )
}

//读tabs 数据。
const tabs = computed(()=>{
   return store.getters['tabStore/getTabs']
})

//当前选中项， v-model 进行绑定 。
const activeKey = ref<string>('')
//监控路由。
watch(()=>route.name,(to)=>{
  activeKey.value = route.name;
  addTab();
})

//点击后跳转。 
const clickHandle = (event:any) =>{
    console.log('###',event.props);
    router.push({name:event.props.name})
}

2.3 。. (支持刷新，)

// 刷新缓存数据
const refresh = () => {
  window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('TABS_ROUTES', JSON.stringify(tabs.value))
  })

  let session = sessionStorage.getItem('TABS_ROUTES')
  if (session) {
    let tabItem = JSON.parse(session)
    tabItem.forEach((tab) => {
      store.commit('tabStore/addTab', tab)
    })
  }
  activeKey.value = route.name;
}


// 页面初始化
onMounted(() => {
  refresh()
})

2.4 删除tab

const removeTab = (targetName: string) => {
  console.log(targetName)
  if (tabs.value.length === 1) {
     return      alert('这已经是最后一页!')
  }

  // 如果删除的是当前页,处理一下activeKey .
  if (activeKey.value === targetName) {
    tabs.value.forEach((tab, index: number) => {
      if (tab.path === targetName) {
        const nextTab = tabs.value[index + 1] || tabs.value[index - 1]
        if (nextTab) {
          activeKey.value = nextTab.name
        }
      }
    })
  }
 
  
  store.commit('tabStore/closeCurrentTab', targetName)

}