first commit

tj

2025-06-05 bba272999cc546f65781bf3d20245a3f819af67f

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
  <!--el-submenu改名为el-sub-menu-->
  <el-sub-menu v-if="item.children?.length > 0" :index="item.path" :teleport="true">
    <template #title>
      <el-icon v-if="item.isElementIcon" size="16">
        <component :is="item.icon"></component>
      </el-icon>
      <div v-else>
        <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
        <img v-else :src="item.icon" alt="icon" class="img-icon" />
      </div>
      <span>{{ item.title }}</span>
    </template>
    <menu-tree v-for="child in item.children" :key="child.path" :item="child" />
  </el-sub-menu>
 
  <el-menu-item v-else :index="item.path" @click="navigateTo(item.path)">
    <el-icon v-if="item.isElementIcon" size="16">
      <component :is="item.icon"></component>
    </el-icon>
    <div v-else>
      <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
      <img v-else :src="item.icon" alt="icon" class="img-icon" />
    </div>
    <template #title
      ><span class="title">{{ item.title }}</span></template
    >
  </el-menu-item>
</template>
 
<script>
export default {
  name: 'MenuTree',
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
 
  methods: {
    navigateTo(path) {
      this.$router.push({ path })
    },
    filterIcon(icon) {
      return icon.indexOf('/') !== -1
    },
  },
}
</script>
 
<style lang="scss" scoped>
.img-icon {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  margin-left: 5px;
  display: inline-block;
  transform: translateY(21px);
}
 
.iconfont {
  margin-right: 10px;
  margin-left: 5px;
  color: $sub-menu-title;
  height: $menu-item-height;
}
 
.title {
  display: inline-block;
  width: 110px;
  @include no-wrap();
}
</style>