vue3 tsx element plus导航栏封装

import _ from 'lodash-es'
import { defineComponent, onMounted, watch, ref,watchEffect } from 'vue'
import { ElMenu, ElMenuItem, ElSubMenu } from 'element-plus'
import { useRouter,useRoute } from 'vue-router'
import Logo from '@/assets/image/logo/logo.png'
import analytics from '@/assets/image/icon/analytics.png'
import campaign from '@/assets/image/icon/campaign.png'
import order from '@/assets/image/icon/order.png'
import settings from '@/assets/image/icon/settings.png'


import styles from './index.module.scss'
interface NavItem {
  id: string
  name: string
  icon: string,
  path?: string
  children?: NavItem[]
}
export default defineComponent({
  name: 'Menu',
  components: {},
  props: {},
  setup(props, ctx) {
    const router = useRouter()
    const route = useRoute()
    const activeIndex = ref<string>('1')
    const navItems = ref<NavItem[]>([
      // {
      //   "id": "5",
      //   "name": "Demo",
      //   "icon": settings,
      //   "path": "/demo"
      // },
        {
          "id": "1",
          "name": "Campaign",
          "icon": campaign,
          "path": "/campaign"
        },
        {
          "id": "2",
          "name": "Orders",
          "icon": order,
          "path": "/order"
        },
        // 这个是有二级路由的时候
        // {
        //   "id": "3",
        //   "name": "收藏",
        //   "icon": "el-icon-star",
        //   "children": [
        //     {
        //       "id": "3-1",
        //       "name": "我的收藏",
        //       "icon": "el-icon-star-on",
        //       "path": "/favorites/mine"
        //     },
        //     {
        //       "id": "3-2",
        //       "name": "热门收藏",
        //       "icon": "el-icon-star-off",
        //       "path": "/favorites/hot"
        //     }
        //   ]
        // },
        {
          "id": "3",
          "name": "Analytics",
          "icon": analytics,
          "path": "/analytics"
        },
        // {
        //   "id": "4",
        //   "name": "Setting",
        //   "icon": settings,
        //   "path": "/setting"
        // },
      ])
    const handleSelect = (key: string) => {
      console.log(key,'key');
      activeIndex.value = key
    }
    const renderNavItem = (item: NavItem) => {
      if (item.children && item.children.length > 0) {
        return (
          <ElSubMenu key={item.id} index={item.id} v-slots={{
            title: () => (
              <div class={styles.container__iconCon}>
                <img src={item.icon} alt={item.name}  class={styles.container__iconCon__icon} />
                <span class={styles.container__iconCon__text}>{item.name}</span> 
              </div>
            )
          }}>
            {item.children.map(renderNavItem)}
          </ElSubMenu>
        )
      } else {
        return (
          <ElMenuItem key={item.id} index={item.id} onClick={() => {
            router.push(item.path || '')
            handleSelect(item.id)
          }}>
            <div class={styles.container__iconCon}>
              <img src={item.icon} alt={item.name} class={styles.container__iconCon__icon} />
              <span class={styles.container__iconCon__text}>{item.name}</span> 
            </div>
          </ElMenuItem>
        )
      }
    }
    // watch(() => route.path, (newPath) => {
    //   const matchedNavItem = navItems.value.find(
    //     (item) =>item.path === newPath
    //   )
    //   if (matchedNavItem) {
    //     activeIndex.value = matchedNavItem.id
    //   }
    //   console.log(activeIndex.value,'activeIndex.value');
      
    // }, { deep: true })
    watchEffect(() => {
      const newPath = route.path
      const matchedNavItem = navItems.value.find(
        (item) => item.path === newPath
      )
      if (matchedNavItem) {
        activeIndex.value = matchedNavItem.id
      }
    })
    onMounted(() => {
    })
    return () => (
      <div class={styles.container}>
        <div class={styles.container__logo}>
          <img src={Logo} alt="" />
        </div>
        <div class={[styles.container__menu,'asideMenu']}>
          <ElMenu
            defaultActive={activeIndex.value}
            // backgroundColor="#545c64"
            // textColor="#fff"
            // activeTextColor="#ffd04b"
            onSelect={handleSelect}
          >
            {navItems.value.map(renderNavItem)}
          </ElMenu>
        </div>
        
      </div> 
    )
  }
})