opt_web/src/layout/navMenu/subItem.vue

<template>
  <template v-for="val in chils">
    <el-sub-menu v-if="val.children && val.children.length > 0" :key="val.path" :index="val.path">
      <template #title>
        <SvgIcon :name="val.meta.icon"/>
        <span>{{ $t(val.meta.title) }}</span>
      </template>
      <sub-item :chil="val.children"/>
    </el-sub-menu>
    <template v-else>
      <el-menu-item :key="val.path" :index="val.path">
        <div class="menu-hover rounded-md absolute left-4 px-10" style="width: 85%;">
          <template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
            <SvgIcon :name="val.meta.icon"/>
            <span>{{ $t(val.meta.title) }}</span>
          </template>
          <template v-else>
            <a class="w100" @click.prevent="onALinkClick(val)">
              <SvgIcon :name="val.meta.icon"/>
              {{ $t(val.meta.title) }}
            </a>
          </template>
        </div>

      </el-menu-item>
    </template>
  </template>
</template>

<script lang="ts" name="navMenuSubItem" setup>
import { computed } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import other from '/@/utils/other';

// 定义父组件传过来的值
const props = defineProps({
  // 菜单列表
  chil: {
    type: Array<RouteRecordRaw>,
    default: () => []
  }
});

// 获取父级菜单数据
const chils = computed(() => {
  return <RouteItems>props.chil;
});
// 打开外部链接
const onALinkClick = (val: RouteItem) => {
  other.handleOpenLink(val);
};
</script>

<style scoped>
.menu-hover:hover {
  background-color: #F2F3F5;
}
</style>