Skip to content

Commit c554d07

Browse files
vvpvvpvvpvvp
committed
feat(Menu): add link handler
Closes #153
1 parent 68d1b8b commit c554d07

8 files changed

Lines changed: 204 additions & 69 deletions

File tree

‎doc/components/component/menu.vue‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<td>menu的数据</td>
2929
<td>Array</td>
3030
<td>-</td>
31-
<td>[]</td>
31+
<td>[ <code>Data</code> ]</td>
3232
</tr>
3333
<tr>
3434
<td>option</td>
@@ -60,6 +60,45 @@
6060
</tr>
6161
</table>
6262

63+
<h3>Data 属性</h3>
64+
<table class="table">
65+
<tr>
66+
<th>属性</th>
67+
<th>类型</th>
68+
<th>说明</th>
69+
</tr>
70+
<tr>
71+
<td>key</td>
72+
<td>String</td>
73+
<td>数据key, 必须有且唯一</td>
74+
</tr>
75+
<tr>
76+
<td>title</td>
77+
<td>String</td>
78+
<td>Menu展示的内容</td>
79+
</tr>
80+
<tr>
81+
<td>icon</td>
82+
<td>String</td>
83+
<td>Menu展示的icon</td>
84+
</tr>
85+
<tr>
86+
<td>href</td>
87+
<td>String | Object</td>
88+
<td>Menu中的a标签链接href属性，可以是route值</td>
89+
</tr>
90+
<tr>
91+
<td>target</td>
92+
<td>String</td>
93+
<td>Menu中的a标签链接target属性</td>
94+
</tr>
95+
<tr>
96+
<td>nativeLink</td>
97+
<td>Boolean</td>
98+
<td>是否保留原生link的行为</td>
99+
</tr>
100+
</table>
101+
63102
<h3>Menu 事件</h3>
64103
<table class="table">
65104
<tr>

‎doc/components/demos/view/menu1.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,18 @@ export default {
7575
key: 'task',
7676
children: [
7777
{
78-
title: '任务-1',
78+
title: 'Baidu',
7979
icon: 'h-icon-bell',
80-
key: 'task1-1'
80+
key: 'task1-1',
81+
href: 'http://www.baidu.com',
82+
nativeLink: true,
83+
target: '_blank'
8184
},
8285
{
83-
title: '任务-2',
86+
title: '首页',
8487
icon: 'h-icon-home',
85-
key: 'task1-2'
88+
key: 'task1-2',
89+
href: { name: 'Home' }
8690
}
8791
]
8892
}

‎doc/components_en/component/menu.vue‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<td>Data of menu</td>
3333
<td>Array</td>
3434
<td>-</td>
35-
<td>[]</td>
35+
<td>[ <code>Data</code> ]</td>
3636
</tr>
3737
<tr>
3838
<td>option</td>
@@ -64,6 +64,45 @@
6464
</tr>
6565
</table>
6666

67+
<h3>Data Props</h3>
68+
<table class="table">
69+
<tr>
70+
<th>Prop</th>
71+
<th>Type</th>
72+
<th>Description</th>
73+
</tr>
74+
<tr>
75+
<td>key</td>
76+
<td>String</td>
77+
<td>Data key, must have and be unique</td>
78+
</tr>
79+
<tr>
80+
<td>title</td>
81+
<td>String</td>
82+
<td>Menu's presentation</td>
83+
</tr>
84+
<tr>
85+
<td>icon</td>
86+
<td>String</td>
87+
<td>Menu's Icon</td>
88+
</tr>
89+
<tr>
90+
<td>href</td>
91+
<td>String | Object</td>
92+
<td>The href attribute of Menu links , which can be a route value</td>
93+
</tr>
94+
<tr>
95+
<td>target</td>
96+
<td>String</td>
97+
<td>The target attribute of Menu links</td>
98+
</tr>
99+
<tr>
100+
<td>nativeLink</td>
101+
<td>Boolean</td>
102+
<td>Whether to retain native link behavior</td>
103+
</tr>
104+
</table>
105+
67106
<h3>Menu Event</h3>
68107
<table class="table">
69108
<tr>

‎src/components/menu/menu-item-show.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="h-menu-show" v-tooltip="inlineCollapsed&&!data.children.length" :content="data.title" placement="right"
3+
@click="togglemenu(data)"
4+
:class="{'h-menu-show-disabled':data.status.disabled, 'h-menu-li-selected': data.key&&status.selected == data.key}">
5+
<span class='h-menu-show-icon' v-show='data.icon'><i :class="data.icon"></i></span>
6+
<span class='h-menu-show-desc'>{{data.title}}</span>
7+
<span class='h-menu-show-count' v-if="data.count"><Badge :count="data.count" :max-count="99"></Badge></span>
8+
<span class='h-menu-show-expand' v-if="data.children&&data.children.length>0">
9+
<i class='h-icon-angle-down'></i>
10+
</span>
11+
</div>
12+
</template>
13+
<script>
14+
15+
export default {
16+
name: 'hMenuItemShow',
17+
props: {
18+
data: Object,
19+
param: Object,
20+
status: Object,
21+
inlineCollapsed: {
22+
type: Boolean,
23+
default: false
24+
}
25+
},
26+
data() {
27+
return {
28+
};
29+
},
30+
methods: {
31+
togglemenu(data) {
32+
this.$emit('trigger', { type: 'togglemenuEvent', data });
33+
}
34+
}
35+
};
36+
</script>

‎src/components/menu/menu-item.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<li class="h-menu-li" :class="{'h-menu-li-opened':(status.opened.indexOf(data.key) != -1)}">
3+
<a :target="data.value.target" @click="triggerClick" v-if="data.value.href" class="h-menu-link" :href="href" >
4+
<MenuItemShow v-bind="$props" @trigger="trigger"></MenuItemShow>
5+
</a>
6+
<MenuItemShow v-else v-bind="$props" @trigger="trigger"></MenuItemShow>
7+
<ul v-if="data.children&&data.children.length>0"
8+
class="h-menu-ul">
9+
<hMenuItem v-for="child of data.children"
10+
:key="child.key"
11+
:data="child"
12+
:param="param"
13+
:status="status"
14+
@trigger="trigger"></hMenuItem>
15+
</ul>
16+
</li>
17+
</template>
18+
<script>
19+
import utils from 'heyui/src/utils/utils';
20+
import MenuItemShow from './menu-item-show';
21+
22+
export default {
23+
name: 'hMenuItem',
24+
components: {
25+
MenuItemShow
26+
},
27+
props: {
28+
data: Object,
29+
param: Object,
30+
status: Object,
31+
inlineCollapsed: {
32+
type: Boolean,
33+
default: false
34+
}
35+
},
36+
data() {
37+
return {
38+
};
39+
},
40+
methods: {
41+
trigger(data) {
42+
this.$emit('trigger', data);
43+
},
44+
triggerClick(event) {
45+
if (this.data.value.nativeLink !== true && !(event.altKey || event.ctrlKey || event.shiftKey || event.metaKey)) {
46+
event.preventDefault();
47+
}
48+
this.trigger(this.data);
49+
}
50+
},
51+
computed: {
52+
href() {
53+
let href = this.data.value.href;
54+
if (href) {
55+
if (utils.isString(href)) {
56+
return href;
57+
} else if (this.$router) {
58+
return this.$router.resolve(href).href;
59+
}
60+
}
61+
return null;
62+
}
63+
}
64+
};
65+
</script>

‎src/components/menu/menu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<script>
1414
import utils from 'heyui/src/utils/utils';
1515
import config from 'heyui/src/utils/config';
16-
import hMenuItem from './menuitem';
16+
import hMenuItem from './menu-item';
1717
1818
const prefix = 'h-menu';
1919

‎src/components/menu/menuitem.vue‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎themes/components/menu.less‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@
3636
.middle();
3737
}
3838
}
39+
& &-li a {
40+
display: block;
41+
color: inherit;
42+
font-weight: inherit;
43+
text-decoration: inherit;
44+
}
3945
}
4046

4147
.h-menu-mode-normal {
@@ -44,23 +50,19 @@
4450
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
4551
overflow: hidden;
4652
}
47-
.h-menu-li{
48-
>ul>li {
49-
>div {
50-
padding-left: 50px;
51-
}
52-
>ul>li {
53-
>div {
54-
padding-left: 70px;
55-
}
56-
}
53+
.h-menu-li .h-menu-li {
54+
.h-menu-show {
55+
padding-left: 50px;
56+
}
57+
.h-menu-li .h-menu-show {
58+
padding-left: 70px;
5759
}
5860
}
59-
.h-menu-li-opened>.h-menu-ul {
61+
.h-menu-li-opened > .h-menu-ul {
6062
max-height: 1000px;
6163
transition: max-height 0.8s ease-in-out;
6264
}
63-
.h-menu-li-opened>.h-menu-show .h-menu-show-expand>i{
65+
.h-menu-li-opened > .h-menu-show .h-menu-show-expand>i{
6466
transform: rotate(0deg);
6567
}
6668
.h-menu-show {

0 commit comments

Comments
 (0)