NavTabs 导航条

快速的数据化配置一个导航条，常用于后台管理系统中。

基础使用

在下面的例子中，基于后台系统做了一个简单的架子，便于理解该组件。

在 Tab 标签栏上右键操作可打开导航功能菜单。

若想保持刷新保留 tabs，可通过 localStorage 等将数据持久化存储在本地。

点击查看代码

<template>
  <ElContainer class="common-layout">
    <ElAside width="100px">Aside</ElAside>
    <ElContainer>
      <ElHeader>Header</ElHeader>

      <AgelNavTabs
        v-model:tabs="tabs"
        :route-path="route.path"
        home-path="/"
        more
        fixed
        reload
        zoom
        @path-change="pathChange"
        @reload="reload"
      >
        <template #menu="{ item }">
          <div @click="(fullScreen = true)">
            <AgelIcon icon="FullScreen"></AgelIcon>
            <span>zoom In</span>
          </div>
        </template>
      </AgelNavTabs>

      <ElMain v-loading="!keepAlive" :class="{ 'full-screen': fullScreen }">
        <RouterView v-if="keepAlive">
          <TableSlot class="w100" style="padding: 0px; margin: 0px" size="mini"></TableSlot>
        </RouterView>
      </ElMain>
    </ElContainer>

    <AgelIcon v-show="fullScreen" icon="CircleCloseFilled" :size="30" class="close" @click="(fullScreen = false)">
    </AgelIcon>
  </ElContainer>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import TableSlot from './tableSlot.vue'

const route = useRoute()
const router = useRouter()

const fullScreen = ref(false)
const keepAlive = ref(true)
const tabs = ref([
  { title: '首页', icon: 'HomeFilled', path: '/' },
  { title: 'Menu 菜单', path: '/component/menu' }
])

watch(
  () => route.path,
  () => {
    const index = tabs.value.findIndex((item) => item.path === route.path)
    if (index == -1) {
      tabs.value.push({
        path: route.path,
        icon: route.meta.icon as string,
        title: route.meta.title as string
      })
    }
  },
  { immediate: true }
)

function pathChange(path: string) {
  router.push({ path })
}

function reload() {
  keepAlive.value = false
  nextTick(() => (keepAlive.value = true))
}
</script>

属性

属性	类型	默认值	说明
v-model:tabs	Tab[]	-	选项卡配置，必须
routePath	string	-	当前路由 path，必须
homePath	string	-	首页 path，该 tab 将置顶不会被移除
more	boolean	true	更多按钮
fixed	boolean	-	固定菜单
reload	boolean	-	重载菜单
isBackground	boolean	-	背景样式导航条

TabProps

属性	类型	默认值	说明
title	string	-	tab 名称，必须
path	index	-	路由地址，必须
icon	string	-	tab 图标或图片地址
fixed	boolean	-	是否固定

事件

名称	参数	说明
path-change	path	path 发生变化时
reload	-	点击重新加载菜单时

插槽

名称	插槽作用域	说明
menu	{ item }	下拉菜单