Appearance
侧边栏菜单 Menu
三级层叠侧边栏菜单
静态组件渲染
组件元素添加".open-menu-react"自适应样式，在小于960px的屏幕会自动隐藏到屏幕左侧
查看代码
html
<div class="open-container">
<!-- 菜单组件 -->
<div class="open-menu" id="menu">
<ul class="open-menu-wrapper">
<li class="open-menu-item">
<a class="open-menu-link" href="/">
<p class="open-menu-title">
<span class="open-menu-icon"><i class="iconfont icon-shouye"></i></span>
<span class="open-menu-name">首页</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link">
<p class="open-menu-title">
<span class="open-menu-icon"><i class="iconfont icon-lanmu"></i></span>
<span class="open-menu-name">栏目管理</span>
</p>
<span class="open-menu-icon-arrow"></span>
</a>
<ul class="open-submenu">
<li class="open-menu-item">
<a class="open-menu-link" >
<p class="open-menu-title">
<span class="open-menu-name">分类管理</span>
</p>
<span class="open-menu-icon-arrow"></span>
</a>
<ul class="open-submenu">
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">视频管理</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">图片管理</span>
</p>
</a>
</li>
</ul>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">标签管理</span>
</p>
</a>
</li>
</ul>
</li>
<li class="open-menu-item">
<a class="open-menu-link">
<p class="open-menu-title">
<span class="open-menu-icon"><i class="iconfont icon-neirong"></i></span>
<span class="open-menu-name">内容管理</span>
</p>
<span class="open-menu-icon-arrow"></span>
</a>
<ul class="open-submenu">
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">文章管理</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">图片管理</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">视频管理</span>
</p>
</a>
</li>
</ul>
</li>
<li class="open-menu-item">
<a class="open-menu-link">
<p class="open-menu-title">
<span class="open-menu-icon"><i class="iconfont icon-icon_hudong-mian"></i></span>
<span class="open-menu-name">互动管理</span>
</p>
<span class="open-menu-icon-arrow"></span>
</a>
<ul class="open-submenu">
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">评论管理</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">点赞管理</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">留言管理</span>
</p>
</a>
</li>
</ul>
</li>
<li class="open-menu-item">
<a class="open-menu-link">
<p class="open-menu-title">
<span class="open-menu-icon"><i class="iconfont icon-yingxiao_selected"></i></span>
<span class="open-menu-name">营销管理</span>
</p>
<span class="open-menu-icon-arrow"></span>
</a>
<ul class="open-submenu">
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">轮播图管理</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">广告管理</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">友情链接管理</span>
</p>
</a>
</li>
</ul>
</li>
<li class="open-menu-item">
<a class="open-menu-link">
<p class="open-menu-title">
<span class="open-menu-icon"><i class="iconfont icon-xitong"></i></span>
<span class="open-menu-name">系统管理</span>
</p>
<span class="open-menu-icon-arrow"></span>
</a>
<ul class="open-submenu">
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">网站信息</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">数据备份</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">SEO</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">内容过滤</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">系统日志</span>
</p>
</a>
</li>
</ul>
</li>
<li class="open-menu-item">
<a class="open-menu-link">
<p class="open-menu-title">
<span class="open-menu-icon"><i class="iconfont icon-guanliyuan"></i></span>
<span class="open-menu-name">管理员管理</span>
</p>
<span class="open-menu-icon-arrow"></span>
</a>
<ul class="open-submenu">
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">管理员管理</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">角色管理</span>
</p>
</a>
</li>
<li class="open-menu-item">
<a class="open-menu-link" href="#">
<p class="open-menu-title">
<span class="open-menu-name">权限分类</span>
</p>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script setup>
import { onMounted } from 'vue'
import openui from '../openui@0.1.0-beta/js/openui.esm.js'
onMounted(()=>{
const menu = openui.menu;
// 静态渲染
menu.renderStatic();
// 监听点击事件
menu.on({
id: '#menu',
click: function(res){
console.log(res)
}
})
})
</script>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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
API
| API | 描述 |
|---|---|
| menu.renderStatic() | 静态渲染 |
| menu.on(id,()={}) | 事件监听 |
| menu.collapse(id); | 横向折叠菜单 |
静态渲染
menu.renderStatic()
默认会获取符合约定的组件dom模版进行渲染
事件监听
menu.on(id,(res)=>{})
js
// 静态组件，动态组件都会触发
// 返回当前点击菜单的href路径
menu.on(id,(url)=>{
console.log(url)
})1
2
3
4
5
2
3
4
5
横向折叠菜单
menu.collapse(id)
- 执行此方法会往菜单组件添加一个样式
- 在pc宽屏下菜单宽度会减少到50px左右，只保留图标的缩减菜单
- 在移动端，会直接隐藏菜单到左侧
- 重复执行此方法，会自动来回隐从屏幕左侧动画显示隐藏菜单
- 如果需要支持响应式，菜单添加
.open-menu-react响应式样式