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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
| /**
| * 该插件可根据菜单配置自动生成 ANTD menu组件
| * menuData示例：
| * [
| * {
| * title: '菜单标题',
| * icon: '菜单图标',
| * path: '菜单路由',
| * invisible: 'boolean, 是否不可见',
| * children: [子菜单配置]
| * },
| * {
| * title: '菜单标题',
| * icon: '菜单图标',
| * path: '菜单路由',
| * invisible: 'boolean, 是否不可见',
| * children: [子菜单配置]
| * }
| * ]
| **/
| import Menu from 'vue-antd-ui/es/menu'
| import Icon from 'vue-antd-ui/es/icon/icon'
|
| const {Item, SubMenu} = Menu
|
| // 默认菜单图标数组，如果菜单没配置图标，则会设置从该数组随机取一个图标配置
| const iconArr = ['dashboard', 'user', 'form', 'setting', 'message', 'safety', 'bell', 'delete', 'code-o', 'poweroff', 'eye-o', 'hourglass']
|
| export default {
| name: 'IMenu',
| props: {
| menuData: {
| type: Array,
| required: true
| },
| theme: {
| type: String,
| required: false,
| default: 'dark'
| },
| mode: {
| type: String,
| required: false,
| default: 'inline'
| },
| collapsed: {
| type: Boolean,
| required: false,
| default: false
| }
| },
| data () {
| return {
| rootSubmenuKeys: ['/form', '/list', '/detail', '/exception', '/result'],
| openKeys: []
| }
| },
| watch: {
| collapsed (val) {
| if (val) {
| this.openKeys = []
| }
| }
| },
| methods: {
| renderIcon: function (h, icon) {
| return icon === 'none' ? null
| : h(
| Icon,
| {
| props: {type: icon !== undefined ? icon : iconArr[Math.floor((Math.random() * iconArr.length))]}
| })
| },
| renderMenuItem: function (h, menu, pIndex, index) {
| return h(
| Item,
| {
| key: menu.path ? menu.path : 'item_' + pIndex + '_' + index
| },
| [
| h(
| 'a',
| {attrs: {href: '#' + menu.path}},
| [
| this.renderIcon(h, menu.icon),
| h('span', [menu.name])
| ]
| )
| ]
| )
| },
| renderSubMenu: function (h, menu, pIndex, index) {
| var this2_ = this
| var subItem = [h('span',
| {slot: 'title'},
| [
| this.renderIcon(h, menu.icon),
| h('span', [menu.name])
| ]
| )]
| var itemArr = []
| var pIndex_ = pIndex + '_' + index
| menu.children.forEach(function (item, i) {
| itemArr.push(this2_.renderItem(h, item, pIndex_, i))
| })
| return h(
| SubMenu,
| {key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index},
| subItem.concat(itemArr)
| )
| },
| renderItem: function (h, menu, pIndex, index) {
| if (!menu.invisible) {
| return menu.children ? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h, menu, pIndex, index)
| }
| },
| renderMenu: function (h, menuTree) {
| var this2_ = this
| var menuArr = []
| menuTree.forEach(function (menu, i) {
| menuArr.push(this2_.renderItem(h, menu, '0', i))
| })
| return menuArr
| },
| onOpenChange (openKeys) {
| const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
| if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
| this.openKeys = openKeys
| } else {
| this.openKeys = latestOpenKey ? [latestOpenKey] : []
| }
| }
| },
| render (h) {
| return h(
| Menu,
| {
| props: {
| theme: this.$props.theme,
| mode: this.$props.mode,
| inlineCollapsed: false,
| openKeys: this.openKeys
| },
| on: {
| openChange: this.onOpenChange
| }
| }, this.renderMenu(h, this.menuData)
| )
| }
| }
|
|
