baozhida_erp/src/layouts/Menu/SubMenu.vue

<script setup lang="ts" name="SubMenu">
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps<{ menuList: Menu.MenuOptions[] }>()
const handleClickMenu = (route: Menu.MenuOptions) => {
  router.push(route.path)
}
// const reg = /^[\u4e00-\u9fa5]+$/
const reg = /^\\{1}/
const isUnicode = (val: string | undefined) => {
  if (!val) return
  console.log(val)
  return reg.test(val)
}
console.log(isUnicode('\ue663'))
</script>

<template>
  <template v-for="subItem in menuList" :key="subItem.path">
    <el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem.path">
      <template #title>
        <el-icon v-if="subItem.meta.icon">
          <component :is="subItem.meta.icon"></component>
        </el-icon>
        <i v-else class="iconfont">{{ subItem.meta.icon }}</i>
        <span>{{ subItem.meta.title }}</span>
      </template>
      <SubMenu :menuList="subItem.children" />
    </el-sub-menu>
    <el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
      <el-icon v-if="subItem.meta.icon">
        <component :is="subItem.meta.icon"></component>
      </el-icon>
      <i v-else class="iconfont">{{ subItem.meta.unicode }}</i>
      <template #title>
        <span>{{ subItem.meta.title }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<style scoped>
.iconfont {
  margin-right: 5px;
  width: var(--el-menu-icon-width);
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}
</style>