menu.vue
5.73 KB
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
<template>
<div>
<Menu mode="horizontal" :theme="theme" active-key="1">
<Menu-item key="1">
<Icon type="ionic"></Icon><span>导航一</span>
</Menu-item>
<Menu-item key="2">导航二</Menu-item>
<Submenu key="3">
<template slot="title"><Icon type="ionic"></Icon>导航三</template>
<Menu-group title="集合1">
<Menu-item key="3-1">导航三 - 一</Menu-item>
<Menu-item key="3-2">导航三 - 二</Menu-item>
</Menu-group>
<Menu-group title="集合2">
<Menu-item key="3-3">导航三 - 三</Menu-item>
<Menu-item key="3-4">导航三 - 四</Menu-item>
</Menu-group>
</Submenu>
<Menu-item key="4">导航四</Menu-item>
</Menu>
<br><br>
<Radio-group :model.sync="theme">
<Radio value="light"></Radio>
<Radio value="dark"></Radio>
<Radio value="primary"></Radio>
</Radio-group>
<br><br>
<Menu :mode="mode" :theme="theme" active-key="1" @on-open-change="change">
<Menu-item key="1">
<Icon type="ionic"></Icon>
<span>导航一</span>
</Menu-item>
<Menu-group title="集合1">
<Menu-item key="2">
<Icon type="ionic"></Icon>
导航二
</Menu-item>
<Menu-item key="3">导航三</Menu-item>
</Menu-group>
<Menu-group title="集合2">
<Menu-item key="4">导航四</Menu-item>
<Menu-item key="5">导航五</Menu-item>
</Menu-group>
<Submenu key="6">
<template slot="title"><Icon type="ionic"></Icon>导航六</template>
<Menu-group title="集合1">
<Menu-item key="3-1">导航三 - 一</Menu-item>
<Menu-item key="3-2">导航三 - 二</Menu-item>
</Menu-group>
<Menu-group title="集合2">
<Menu-item key="3-3">导航三 - 三</Menu-item>
<Menu-item key="3-4">导航三 - 四</Menu-item>
</Menu-group>
</Submenu>
<Submenu key="7">
<template slot="title"><Icon type="ionic"></Icon>导航七</template>
<Menu-group title="集合1">
<Menu-item key="7-1">导航三 - 一</Menu-item>
<Menu-item key="7-2">导航三 - 二</Menu-item>
</Menu-group>
<Menu-group title="集合2">
<Menu-item key="7-3">导航三 - 三</Menu-item>
<Menu-item key="7-4">导航三 - 四</Menu-item>
</Menu-group>
</Submenu>
</Menu>
<!--<Menu :mode="mode" active-key="1">-->
<!--<Menu-item key="1">-->
<!--<Icon type="ionic"></Icon>-->
<!--<span>导航一</span>-->
<!--</Menu-item>-->
<!--<Menu-item key="2">导航二</Menu-item>-->
<!--<Submenu key="3">-->
<!--<template slot="title"><Icon type="ionic"></Icon><span>导航三</span></template>-->
<!--<Menu-group title="集合1">-->
<!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
<!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
<!--</Menu-group>-->
<!--<Menu-group title="集合2">-->
<!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
<!--<Menu-item key="3-4">导航三 - 四</Menu-item>-->
<!--</Menu-group>-->
<!--</Submenu>-->
<!--<Menu-item key="4">导航四</Menu-item>-->
<!--</Menu>-->
<!--<br><br>-->
<!--<Menu mode="horizontal" theme="dark" active-key="1">-->
<!--<Menu-item key="1">-->
<!--<Icon type="ionic"></Icon>-->
<!--<span>导航一</span>-->
<!--</Menu-item>-->
<!--<Menu-item key="2">导航二</Menu-item>-->
<!--<Submenu key="3">-->
<!--<span slot="title">导航三</span>-->
<!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
<!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
<!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
<!--</Submenu>-->
<!--<Menu-item key="4">导航四</Menu-item>-->
<!--</Menu>-->
<!--<br><br>-->
<!--<Menu mode="horizontal" theme="primary" active-key="1">-->
<!--<Menu-item key="1">-->
<!--<Icon type="ionic"></Icon>-->
<!--<span>导航一</span>-->
<!--</Menu-item>-->
<!--<Menu-item key="2">导航二</Menu-item>-->
<!--<Submenu key="3">-->
<!--<span slot="title">导航三</span>-->
<!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
<!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
<!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
<!--</Submenu>-->
<!--<Menu-item key="4">导航四</Menu-item>-->
<!--</Menu>-->
</div>
</template>
<script>
export default {
props: {},
data () {
return {
mode: 'vertical',
theme: 'dark'
}
},
computed: {},
methods: {
toggleMode () {
this.mode = this.mode === 'horizontal' ? 'vertical' : 'horizontal';
},
change (d) {
console.log(d)
}
}
}
</script>