Skip to content

Commit 3d7acb7

Browse files
sendyasendya
committed
refactor: a-menu jsx render, fix top-navmenu error #119 
1 parent 17035e3 commit 3d7acb7

File tree

4 files changed

+246
-69
lines changed

4 files changed

+246
-69
lines changed

‎src/components/menu/index.js

Lines changed: 74 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -57,53 +57,7 @@ export default {
5757
}
5858
},
5959
methods: {
60-
renderIcon: function (h, icon) {
61-
if (icon === 'none' || icon === undefined) {
62-
return null
63-
}
64-
const props = {}
65-
typeof (icon) === 'object' ? props.component = icon : props.type = icon
66-
return h(Icon, { props: { ...props } })
67-
},
68-
renderMenuItem: function (h, menu, pIndex, index) {
69-
const target = menu.meta.target || null
70-
return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, [
71-
h('router-link', { attrs: { to: { name: menu.name }, target: target } }, [
72-
this.renderIcon(h, menu.meta.icon),
73-
h('span', [menu.meta.title])
74-
])
75-
])
76-
},
77-
renderSubMenu: function (h, menu, pIndex, index) {
78-
const this2_ = this
79-
const subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.meta.icon), h('span', [menu.meta.title])])]
80-
const itemArr = []
81-
const pIndex_ = pIndex + '_' + index
82-
console.log('menu', menu)
83-
if (!menu.hideChildrenInMenu) {
84-
menu.children.forEach(function (item, i) {
85-
itemArr.push(this2_.renderItem(h, item, pIndex_, i))
86-
})
87-
}
88-
return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr))
89-
},
90-
renderItem: function (h, menu, pIndex, index) {
91-
if (!menu.hidden) {
92-
return menu.children && !menu.hideChildrenInMenu
93-
? this.renderSubMenu(h, menu, pIndex, index)
94-
: this.renderMenuItem(h, menu, pIndex, index)
95-
}
96-
},
97-
renderMenu: function (h, menuTree) {
98-
const this2_ = this
99-
const menuArr = []
100-
menuTree.forEach(function (menu, i) {
101-
if (!menu.hidden) {
102-
menuArr.push(this2_.renderItem(h, menu, '0', i))
103-
}
104-
})
105-
return menuArr
106-
},
60+
// select menu item
10761
onOpenChange (openKeys) {
10862
const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
10963
if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
@@ -130,27 +84,82 @@ export default {
13084
}
13185

13286
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
87+
},
88+
89+
// render
90+
renderItem (menu) {
91+
if (!menu.hidden) {
92+
return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
93+
}
94+
return null
95+
},
96+
renderMenuItem (menu) {
97+
const target = menu.meta.target || null
98+
const props = {
99+
to: { name: menu.name },
100+
target: target
101+
}
102+
return (
103+
<Item {...{ key: menu.path }}>
104+
<router-link {...{ props }}>
105+
{this.renderIcon(menu.meta.icon)}
106+
<span>{menu.meta.title}</span>
107+
</router-link>
108+
</Item>
109+
)
110+
},
111+
renderSubMenu (menu) {
112+
const itemArr = []
113+
if (!menu.hideChildrenInMenu) {
114+
menu.children.forEach(item => itemArr.push(this.renderItem(item)))
115+
}
116+
return (
117+
<SubMenu {...{ key: menu.path }}>
118+
<span slot="title">
119+
{this.renderIcon(menu.meta.icon)}
120+
<span>{menu.meta.title}</span>
121+
</span>
122+
{itemArr}
123+
</SubMenu>
124+
)
125+
},
126+
renderIcon (icon) {
127+
if (icon === 'none' || icon === undefined) {
128+
return null
129+
}
130+
const props = {}
131+
typeof (icon) === 'object' ? props.component = icon : props.type = icon
132+
return (
133+
<Icon {... { props } }/>
134+
)
133135
}
134136
},
135-
render (h) {
136-
return h(
137-
Menu,
138-
{
139-
props: {
140-
theme: this.$props.theme,
141-
mode: this.$props.mode,
142-
openKeys: this.openKeys,
143-
selectedKeys: this.selectedKeys
144-
},
145-
on: {
146-
openChange: this.onOpenChange,
147-
select: obj => {
148-
this.selectedKeys = obj.selectedKeys
149-
this.$emit('select', obj)
150-
}
151-
}
137+
render () {
138+
const { mode, theme, menu } = this
139+
const props = {
140+
mode: mode,
141+
theme: theme,
142+
openKeys: this.openKeys
143+
}
144+
const on = {
145+
select: obj => {
146+
this.selectedKeys = obj.selectedKeys
147+
this.$emit('select', obj)
152148
},
153-
this.renderMenu(h, this.menu)
149+
openChange: this.onOpenChange
150+
}
151+
152+
const menuTree = menu.map(item => {
153+
if (item.hidden) {
154+
return null
155+
}
156+
return this.renderItem(item)
157+
})
158+
// {...{ props, on: on }}
159+
return (
160+
<Menu vModel={this.selectedKeys} {...{ props, on: on }}>
161+
{menuTree}
162+
</Menu>
154163
)
155164
}
156165
}

‎src/components/menu/index.render.js

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import Menu from 'ant-design-vue/es/menu'
2+
import Icon from 'ant-design-vue/es/icon'
3+
4+
const { Item, SubMenu } = Menu
5+
6+
export default {
7+
name: 'SMenu',
8+
props: {
9+
menu: {
10+
type: Array,
11+
required: true
12+
},
13+
theme: {
14+
type: String,
15+
required: false,
16+
default: 'dark'
17+
},
18+
mode: {
19+
type: String,
20+
required: false,
21+
default: 'inline'
22+
},
23+
collapsed: {
24+
type: Boolean,
25+
required: false,
26+
default: false
27+
}
28+
},
29+
data () {
30+
return {
31+
openKeys: [],
32+
selectedKeys: [],
33+
cachedOpenKeys: []
34+
}
35+
},
36+
computed: {
37+
rootSubmenuKeys: vm => {
38+
const keys = []
39+
vm.menu.forEach(item => keys.push(item.path))
40+
return keys
41+
}
42+
},
43+
created () {
44+
this.updateMenu()
45+
},
46+
watch: {
47+
collapsed (val) {
48+
if (val) {
49+
this.cachedOpenKeys = this.openKeys.concat()
50+
this.openKeys = []
51+
} else {
52+
this.openKeys = this.cachedOpenKeys
53+
}
54+
},
55+
$route: function () {
56+
this.updateMenu()
57+
}
58+
},
59+
methods: {
60+
renderIcon: function (h, icon) {
61+
if (icon === 'none' || icon === undefined) {
62+
return null
63+
}
64+
const props = {}
65+
typeof (icon) === 'object' ? props.component = icon : props.type = icon
66+
return h(Icon, { props: { ...props } })
67+
},
68+
renderMenuItem: function (h, menu, pIndex, index) {
69+
const target = menu.meta.target || null
70+
return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, [
71+
h('router-link', { attrs: { to: { name: menu.name }, target: target } }, [
72+
this.renderIcon(h, menu.meta.icon),
73+
h('span', [menu.meta.title])
74+
])
75+
])
76+
},
77+
renderSubMenu: function (h, menu, pIndex, index) {
78+
const this2_ = this
79+
const subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.meta.icon), h('span', [menu.meta.title])])]
80+
const itemArr = []
81+
const pIndex_ = pIndex + '_' + index
82+
console.log('menu', menu)
83+
if (!menu.hideChildrenInMenu) {
84+
menu.children.forEach(function (item, i) {
85+
itemArr.push(this2_.renderItem(h, item, pIndex_, i))
86+
})
87+
}
88+
return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr))
89+
},
90+
renderItem: function (h, menu, pIndex, index) {
91+
if (!menu.hidden) {
92+
return menu.children && !menu.hideChildrenInMenu
93+
? this.renderSubMenu(h, menu, pIndex, index)
94+
: this.renderMenuItem(h, menu, pIndex, index)
95+
}
96+
},
97+
renderMenu: function (h, menuTree) {
98+
const this2_ = this
99+
const menuArr = []
100+
menuTree.forEach(function (menu, i) {
101+
if (!menu.hidden) {
102+
menuArr.push(this2_.renderItem(h, menu, '0', i))
103+
}
104+
})
105+
return menuArr
106+
},
107+
onOpenChange (openKeys) {
108+
const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
109+
if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
110+
this.openKeys = openKeys
111+
} else {
112+
this.openKeys = latestOpenKey ? [latestOpenKey] : []
113+
}
114+
},
115+
updateMenu () {
116+
const routes = this.$route.matched.concat()
117+
118+
if (routes.length >= 4 && this.$route.meta.hidden) {
119+
routes.pop()
120+
this.selectedKeys = [routes[2].path]
121+
} else {
122+
this.selectedKeys = [routes.pop().path]
123+
}
124+
125+
const openKeys = []
126+
if (this.mode === 'inline') {
127+
routes.forEach(item => {
128+
openKeys.push(item.path)
129+
})
130+
}
131+
132+
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
133+
}
134+
},
135+
render (h) {
136+
return h(
137+
Menu,
138+
{
139+
props: {
140+
theme: this.$props.theme,
141+
mode: this.$props.mode,
142+
openKeys: this.openKeys,
143+
selectedKeys: this.selectedKeys
144+
},
145+
on: {
146+
openChange: this.onOpenChange,
147+
select: obj => {
148+
this.selectedKeys = obj.selectedKeys
149+
this.$emit('select', obj)
150+
}
151+
}
152+
},
153+
this.renderMenu(h, this.menu)
154+
)
155+
}
156+
}

‎src/components/page/GlobalLayout.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,7 @@ export default {
299299
display: inline-block;
300300
transition: all .3s;
301301
height: 100%;
302+
color: rgba(0, 0, 0, 0.65);
302303
303304
&:hover {
304305
background: rgba(0, 0, 0, 0.025);
@@ -323,6 +324,9 @@ export default {
323324
324325
.action {
325326
color: rgba(255, 255, 255, 0.85);
327+
a {
328+
color: rgba(255, 255, 255, 0.85);
329+
}
326330
327331
&:hover {
328332
background: rgba(255, 255, 255, 0.16);
@@ -348,6 +352,9 @@ export default {
348352
text-align: center;
349353
width: 56px;
350354
line-height: 58px;
355+
h1 {
356+
display: none;
357+
}
351358
}
352359
}
353360
}
@@ -380,6 +387,9 @@ export default {
380387
white-space: nowrap;
381388
}
382389
}
390+
.ant-menu.ant-menu-horizontal {
391+
max-width: 350px;
392+
}
383393
}
384394
}
385395
@@ -401,6 +411,8 @@ export default {
401411
border: none;
402412
height: 64px;
403413
line-height: 64px;
414+
width: 100%;
415+
max-width: 700px;
404416
}
405417
406418
.header-index-left {

‎src/components/tools/UserMenu.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div class="user-wrapper">
3-
<span class="action">
4-
<a href="https://pro.loacg.com/docs/getting-started" target="_blank" style="color: #001529">
3+
<a href="https://pro.loacg.com/docs/getting-started" target="_blank">
4+
<span class="action">
55
<a-icon type="question-circle-o"></a-icon>
6-
</a>
7-
</span>
6+
</span>
7+
</a>
88
<header-notice class="action"/>
99
<a-dropdown>
1010
<span class="action ant-dropdown-link user-dropdown-menu">

0 commit comments

Comments
 (0)