feat: 🎸 新增固定一级菜单配置
陈凯龙
5 years ago
parent
62eeb55330
commit
4c4903e806
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
:tab-position="tabPosition"
|
||||
@tab-click="changeTab"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(item, $index) in tabRouters"
|
||||
:key="$index"
|
||||
:name="item.path === '/' ? '/dashboard' : item.path"
|
||||
>
|
||||
<template #label>
|
||||
<div class="label-item">
|
||||
<svg-icon :icon-class="filterTab(item, 'icon')" />
|
||||
<div class="title-item">{{ filterTab(item, 'title') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watch, onMounted, computed } from 'vue'
|
||||
import { appStore } from '_@/store/modules/app'
|
||||
import { permissionStore } from '_@/store/modules/permission'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { findIndex } from '@/utils'
|
||||
import { isExternal } from '@/utils/validate'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MenuTab',
|
||||
setup() {
|
||||
const { currentRoute, push } = useRouter()
|
||||
|
||||
const activeName = ref<string>('')
|
||||
|
||||
const routers = computed((): RouteRecordRaw[] => permissionStore.routers)
|
||||
const tabRouters = computed((): RouteRecordRaw[] => routers.value.filter(v => !v.meta?.hidden))
|
||||
|
||||
const layout = computed(() => appStore.layout)
|
||||
const tabPosition = computed(() => layout.value === 'Classic' ? 'left' : 'top')
|
||||
|
||||
function init() {
|
||||
const currentPath = currentRoute.value.fullPath.split('/')
|
||||
const index = findIndex(tabRouters.value, (v: RouteRecordRaw) => {
|
||||
if (v.path === '/') {
|
||||
return `/${currentPath[1]}` === '/dashboard'
|
||||
} else {
|
||||
return v.path === `/${currentPath[1]}`
|
||||
}
|
||||
})
|
||||
if (index > -1) {
|
||||
activeName.value = `/${currentPath[1]}`
|
||||
setActive(index)
|
||||
permissionStore.SetAcitveTab(activeName.value)
|
||||
}
|
||||
}
|
||||
|
||||
function filterTab(item: RouteRecordRaw | any, key: string): any {
|
||||
return item.meta && item.meta[key] ? item.meta[key] : item.children[0].meta[key]
|
||||
}
|
||||
|
||||
function setActive(index: number): void {
|
||||
const currRoute: any = tabRouters.value[index]
|
||||
permissionStore.SetMenuTabRouters(currRoute.children)
|
||||
}
|
||||
|
||||
function changeTab(item: any) {
|
||||
const currRoute: any = tabRouters.value[item.index]
|
||||
permissionStore.SetMenuTabRouters(currRoute.children)
|
||||
if (isExternal(currRoute.children[0].path)) {
|
||||
window.open(currRoute.children[0].path)
|
||||
} else {
|
||||
push(`${activeName.value === '/dashboard' ? '' : activeName.value}/${currRoute.children[0].path}`)
|
||||
permissionStore.SetAcitveTab(activeName.value)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => currentRoute.value,
|
||||
() => {
|
||||
init()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => activeName.value,
|
||||
(val) => {
|
||||
permissionStore.SetAcitveTab(val)
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
activeName,
|
||||
tabRouters,
|
||||
tabPosition,
|
||||
filterTab,
|
||||
setActive,
|
||||
changeTab
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.label-item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
&>div {
|
||||
width: 100%;
|
||||
}
|
||||
.title-item {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue