jy2024-ui/src/layout/components/topMenu/index.vue

<template>
  <div class="top-menu-row" v-if="routeData.length">
    <span v-for="(item,index) in routeData" :key="index" :class="['s-span',{'active-span':currentPath === item.path}]">
      <el-button :icon="item.icon" @click="router.push(item.path)">
        {{ item.title }}
      </el-button>
    </span>
  </div>
</template>
<script setup lang="ts">
import {menuData} from "./menu"
import {useRoute, useRouter} from "vue-router"
import {onMounted, watch} from "vue";

const router = useRouter()
const route = useRoute()
const routeData = ref([])
const currentPath = ref("")
const findMatchingArray = (path) => {
  currentPath.value = path
  return menuData.find(group =>
      group.some(item => item.path === path || item.path.endsWith(path))
  ) || [];
}

watch(() => route.path, (value) => {
  routeData.value = findMatchingArray(value)
})

onMounted(() => {
  routeData.value = findMatchingArray(route.path)
})


</script>
<style scoped lang="scss">
.top-menu-row {
  border-bottom: 1px solid rgba($color: #e6e6e6, $alpha: .6);
  background: rgba($color: #f9f9f9, $alpha: .3);
  display: flex;
  align-items: flex-start;
  padding-left: 20px;
  margin-bottom: 5px;
  box-shadow: 0 1px 2px 0 rgba($color: #000000, $alpha: .05);

  .s-span {
    margin-right: 30px;

    .el-button--default {
      background: none;
      border: 0;
      padding: 0;
    }

    padding: 4px 0;
  }

  .active-span {
    border-bottom: 3px solid #409eff;
    margin-bottom: -1px;

    .el-button--default {
      color: #409eff;
      font-weight: bold;
    }
  }
}
</style>