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
<template>
<div class="app-sider-menus">
<template v-for="(item,index) in menus">
<template v-if="item.items && Array.isArray(item.items) && item.items.length > 0">
<el-submenu :key="index" :index="item.id" :disabled="item.disabled">
<template slot='title'>
<img v-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" class='app-menu-icon'/>
<i v-else-if="item.iconcls && !Object.is(item.iconcls, '')" :class="item.iconcls + ' app-menu-icon'"></i>
<template v-else></template>
<span>{{item.text}}</span>
</template>
<app-sider-menus :menus="item.items"></app-sider-menus>
</el-submenu>
</template>
<template v-else>
<el-menu-item :key="index" :index="item.id" :disabled="item.disabled">
<img v-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" class='app-menu-icon'/>
<i v-else-if="item.iconcls && !Object.is(item.iconcls, '')" :class="item.iconcls + ' app-menu-icon'"></i>
<template v-else></template>
<el-popover
:content="$t('components.appformdruipart.blockuitipinfo')"
width="150"
popper-class="app-tooltip"
:disabled="!item.disabled"
trigger="hover">
<span slot="reference">{{item.text}}</span>
</el-popover>
<span v-if="item.counter && (item.counter.count || item.counter.count == 0)" v-badge="item.counter" class="right-badge"/>
</el-menu-item>
</template>
</template>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({})
export default class AppSiderMenus extends Vue {
/**
* 菜单数据
*
* @type {*}
* @memberof AppSiderMenus
*/
@Prop({ default: [] }) public menus!: any;
}
</script>