menduner/src/views/entrances/navBar/index.vue

<template>
  <v-toolbar
    class="banner"
    density="compact"
    style="padding-left: 0px;height: 50px;font-size: 14px;"
  >
    <div class="innerBox d-flex justify-space-between">
      <div class="d-flex align-center">
        <div class="nav-logo" style="cursor: pointer;" @click="handleLogoClick">
          <v-img src="@/assets/logo.png"  aspect-ratio="16/9" cover :width="90" style="height: 40px;"></v-img>
        </div>
        <div class="menuList ml-10">
          <div v-for="val in menuList" :key="val.name">
            <template v-if="val.fileName">
              <component :is="val.fileName" :title="val.title" @emitClick="eventVal => handleClick(eventVal)"></component>
            </template>
            <template v-else>
              <span class="cursor-pointer" @click="handleClick(val)">{{ val.title }}</span>
            </template>
          </div>
        </div>
      </div>
      <div class="d-flex">
        <span>右侧</span>
      </div>
    </div>
  </v-toolbar>
</template>

<script setup>
import product from './components/product.vue'
import solution from './components/solution.vue'
import Snackbar from '@/plugins/snackbar'
import { useRouter } from 'vue-router'; const router = useRouter()
defineOptions({name: 'entrances-navBar'})
const handleLogoClick = () => { router.push({ path: '/'}) }

const menuList = [
  { title: '产品', fileName: product },
  { title: '解决方案', fileName: solution },
  { title: '客户案例', path: '/' },
  { title: '服务支持', fileName: product },
  { title: '资源中心', fileName: product },
  { title: '了解门墩儿', fileName: product },
]
const handleClick = (val) => {
  Snackbar.warning('暂未开发，敬请期待！')
  console.log('handleClick', val)
  // if (val.path) window.open(val.path)
}
</script>
<style lang="scss" scoped>
@import '@/styles/entrances/navBar.scss'
</style>