slibra-module-web/src/components/Layout/TheMenu.vue

<script setup lang="tsx">
import {  h } from 'vue'
import { NMenu } from 'naive-ui'
import { RouterLink } from 'vue-router'
import SvgIcon from '@/components/SvgIcon/index.vue'


function renderIcon(props: {name: string, size?: number, class?: string[], color?: string}) {
  return () => h(SvgIcon, { ...props })
}

function renderChildrenIcon({ name, size = 20 }:{ name:string, size?: number }) {
  return () => (
    <div class="flex items-center justify-center">
      { renderIcon({ name, size, class: ['icon-default'] })() }
      { renderIcon({ name: name + '-active', size, class: ['icon-active', 'hidden'] })() }
    </div>
  )
}

function renderLabel (val: string) {
  return (<span class="pl-1 test">{ val }</span>);
}

const menuOptions: MenuOption[] = [
  {
    label: () => renderLabel('智慧总控'),
    icon: renderIcon({name: 'menu-control'}),
    key: '/'
  },
  {
    label: () => renderLabel('专家问答'),
    icon: renderIcon({name: 'menu-answers'}),
    key: '/'
  },
  {
    label: () => renderLabel('智能分析'),
    icon: renderIcon({ name: 'menu-analyse' }),
    key: '/',
    children: [
      {
        label:() =>  renderLabel('水质报警'),
        icon: renderChildrenIcon({ name: 'menu-analyse-water' }),
        key: 'key1',
      },
      {
        label: '生化报警',
        icon: renderChildrenIcon({ name: 'menu-analyse-pymol' }),
        key: 'key2',
      },
      {
        label: '预测报警',
        icon: renderChildrenIcon({ name: 'menu-analyse-notice' }),
        key: 'key3',
      },
      {
        label: '智能工单',
        icon: renderChildrenIcon({ name: 'menu-analyse-order' }),
        key: 'key4',
      }
    ]
  },
  {
    label: () => renderLabel('智能助手'),
    icon: renderIcon({ name: 'menu-user' }),
    key: '/'
  },
  {
    label: () => renderLabel('用户中心'),
    icon: renderIcon({ name: 'menu-help' }),
    key: '/'
  },
]

const handleUpdateValue = () => {
  console.log(123123);
}

</script>

<template>
  <n-menu
    :options="menuOptions"
    :icon-size="30"
    @update:value="handleUpdateValue"
  >
  </n-menu>
</template>

<style scoped lang="scss">

</style>

<style lang="scss">

@mixin sub-menu-active {
  .n-menu-item-content__icon {
    .icon-default {
      display: none;
    }
    .icon-active {
      display: block;
    }
  }
  
  .n-menu-item-content-header {
    font-weight: bold;
  }

}

.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover::before {
  border: 1px solid #fff;
  background: #FCFDFE;
}

// 子菜单hover
.n-submenu-children {
  .n-menu-item-content:hover {
    @include sub-menu-active();
  }
}
// reset - 选中状态
.n-menu-item-content--selected {
  @include sub-menu-active();
  &:not(.n-menu-item-content--disabled)::before {
    border: 1px solid #fff;
    background: #FCFDFE;
  }
}

// reset - 选中状态
// .n-menu-item-content--selected {
//   font-weight: bold;
// }
// .n-base-icon {
//   background: url('@/assets/svgs/menu/arrow.svg') center center no-repeat;
//   svg {
//     display: none;
//   }
// }
</style>