qdt-admin-layout 1.0.0 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -6
- package/package.json +2 -2
- package/src/component/ElMenu/sub.vue +12 -10
- package/src/component/Layout/index.vue +1 -1
- package/src/component/Layout/style.scss +2 -2
- package/src/component/NavMenu/index.vue +34 -34
- package/src/component/NavMenu/style.scss +35 -13
- package/src/component/NavMenu/theme-dark.scss +1 -1
- package/src/component/NavMenu/theme-light.scss +5 -6
- package/src/store/app.js +2 -2
package/README.md
CHANGED
|
@@ -1,22 +1,21 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
这是一个基于`element-ui`的后台管理layout组件，需要配合`vue2`、`vue-router3`使用。
|
|
1
|
+
# qdt-admin-layout
|
|
4
2
|
|
|
3
|
+
签到通定制版
|
|
5
4
|
|
|
6
5
|
## 功能特性
|
|
7
6
|
|
|
8
|
-
- flex布局、有限的移动端适配
|
|
7
|
+
- flex 布局、有限的移动端适配
|
|
9
8
|
- 仿`ant-design-pro`的三种导航
|
|
10
9
|
- 多页签
|
|
11
10
|
- 侧边栏和顶栏的深色\亮色主题
|
|
12
11
|
- 侧边栏可搜索
|
|
13
12
|
- 路由和菜单分离
|
|
14
13
|
- 支持各种页面缓存（不支持嵌套路由）
|
|
15
|
-
- 支持iframe、外链
|
|
14
|
+
- 支持 iframe、外链
|
|
16
15
|
- 数据外部可控，满足大部分定制化需求
|
|
17
16
|
|
|
18
17
|
## 安装
|
|
19
18
|
|
|
20
19
|
```
|
|
21
|
-
npm i
|
|
20
|
+
npm i qdt-admin-layout -S
|
|
22
21
|
```
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "qdt-admin-layout",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "基于element-ui的后台管理layout",
|
|
3
|
+
"version": "1.0.4",
|
|
4
|
+
"description": "基于element-ui的后台管理layout的管家婆改版",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"jsdelivr": "dist/index.umd.min.js",
|
|
@@ -88,16 +88,18 @@ export default {
|
|
|
88
88
|
on-mouseleave={() => this.handleMouseleave(true)}
|
|
89
89
|
on-focus={(e) => this.handleMouseenter(e, 100)}
|
|
90
90
|
>
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
91
|
+
<div class="menu-display">
|
|
92
|
+
{this.$slots.default.map((item) => {
|
|
93
|
+
return (
|
|
94
|
+
<ul
|
|
95
|
+
style="display:inline-block;width:200px;vertical-align: top;margin:0;"
|
|
96
|
+
class={this.popupMenuClass}
|
|
97
|
+
>
|
|
98
|
+
{item}
|
|
99
|
+
</ul>
|
|
100
|
+
);
|
|
101
|
+
})}
|
|
102
|
+
</div>
|
|
101
103
|
</div>
|
|
102
104
|
</transition>
|
|
103
105
|
) : (
|
|
@@ -94,7 +94,7 @@ export default {
|
|
|
94
94
|
if (slot) return slot(h, { menu, depth });
|
|
95
95
|
|
|
96
96
|
const icon = menu.meta.icon;
|
|
97
|
-
return icon && <i
|
|
97
|
+
return icon && <i class={`menu-icon ${icon}`} />;
|
|
98
98
|
},
|
|
99
99
|
// 渲染菜单内容
|
|
100
100
|
renderMenuContent(h, menu, depth) {
|
|
@@ -122,28 +122,25 @@ export default {
|
|
|
122
122
|
const noContent =
|
|
123
123
|
depth === 1 && this.collapse && this.mode === "vertical";
|
|
124
124
|
return (
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
>
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
{children}
|
|
145
|
-
</SubMenu>
|
|
146
|
-
</div>
|
|
125
|
+
<SubMenu
|
|
126
|
+
key={fullPath}
|
|
127
|
+
index={fullPath}
|
|
128
|
+
inline-indent={this.inlineIndent}
|
|
129
|
+
popper-class={this.themeClass}
|
|
130
|
+
popper-append-to-body
|
|
131
|
+
>
|
|
132
|
+
<template slot="title">
|
|
133
|
+
{depth == 1 && (
|
|
134
|
+
<div style="padding: 10% 0;">
|
|
135
|
+
{this.renderMenuIcon(h, menu, depth)}
|
|
136
|
+
<div>{menu.meta.title}</div>
|
|
137
|
+
</div>
|
|
138
|
+
)}
|
|
139
|
+
|
|
140
|
+
{!noContent && this.renderMenuContent(h, menu, depth)}
|
|
141
|
+
</template>
|
|
142
|
+
{children}
|
|
143
|
+
</SubMenu>
|
|
147
144
|
);
|
|
148
145
|
},
|
|
149
146
|
// 渲染有子级且需要显示父级的菜单
|
|
@@ -156,8 +153,13 @@ export default {
|
|
|
156
153
|
});
|
|
157
154
|
data.push(
|
|
158
155
|
<div>
|
|
159
|
-
<div
|
|
160
|
-
|
|
156
|
+
<div
|
|
157
|
+
style="font-weight:800;color:black"
|
|
158
|
+
class="popover-menu__title"
|
|
159
|
+
>
|
|
160
|
+
<div class="title-boder">
|
|
161
|
+
{this.renderMenuContent(h, x, depth)}
|
|
162
|
+
</div>
|
|
161
163
|
</div>
|
|
162
164
|
<div class="el-menu el-menu--inline">{childrens}</div>
|
|
163
165
|
</div>
|
|
@@ -170,15 +172,13 @@ export default {
|
|
|
170
172
|
return menus.map((menu) => {
|
|
171
173
|
let children = [];
|
|
172
174
|
//弹出菜单显示父级信息;
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
);
|
|
181
|
-
}
|
|
175
|
+
// 这里认为父级的深度应该+1
|
|
176
|
+
children = this.renderChildrenWithParentMenu(
|
|
177
|
+
h,
|
|
178
|
+
menu,
|
|
179
|
+
children,
|
|
180
|
+
depth + 1
|
|
181
|
+
);
|
|
182
182
|
// 一级菜单
|
|
183
183
|
return this.renderSubMenu(h, menu, children, depth);
|
|
184
184
|
});
|
|
@@ -1,16 +1,28 @@
|
|
|
1
|
+
.menu-display {
|
|
2
|
+
margin-left: 5px;
|
|
3
|
+
ul {
|
|
4
|
+
border-left: 1px solid rgb(228, 231, 237);
|
|
5
|
+
}
|
|
6
|
+
ul:first-child {
|
|
7
|
+
border: none;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
.title-boder {
|
|
11
|
+
height: 38px;
|
|
12
|
+
border-bottom: 1px solid rgb(228, 231, 237);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.el-menu--collapse .el-submenu {
|
|
16
|
+
height: 88px !important;
|
|
17
|
+
}
|
|
18
|
+
|
|
1
19
|
.el-menu {
|
|
2
20
|
width: 100%;
|
|
3
|
-
border: none !important;
|
|
4
21
|
|
|
5
22
|
// 菜单图标
|
|
6
23
|
.menu-icon {
|
|
7
24
|
color: inherit;
|
|
8
25
|
font-size: 38px;
|
|
9
|
-
|
|
10
|
-
// 与菜单内容的间隔
|
|
11
|
-
& + * {
|
|
12
|
-
margin-left: $menu-icon-text-gap;
|
|
13
|
-
}
|
|
14
26
|
}
|
|
15
27
|
|
|
16
28
|
// 子级菜单激活时，父级同样高亮
|
|
@@ -52,19 +64,29 @@
|
|
|
52
64
|
//菜单hover时，左侧图标放大（弹出菜单的父级不放大）
|
|
53
65
|
.el-menu-item:not(.popover-menu__title),
|
|
54
66
|
.el-submenu__title {
|
|
55
|
-
|
|
56
|
-
> .el-tooltip > .menu-icon {
|
|
67
|
+
.menu-icon {
|
|
57
68
|
transition: transform 0.1s;
|
|
58
69
|
}
|
|
59
70
|
|
|
60
71
|
&:hover {
|
|
61
|
-
|
|
62
|
-
> .el-tooltip > .menu-icon {
|
|
72
|
+
.menu-icon {
|
|
63
73
|
transform: scale(1.2);
|
|
64
74
|
}
|
|
65
75
|
}
|
|
66
76
|
}
|
|
67
77
|
|
|
78
|
+
.el-menu--popup {
|
|
79
|
+
.popover-menu__title {
|
|
80
|
+
height: 40px !important;
|
|
81
|
+
line-height: 40px !important;
|
|
82
|
+
border: none;
|
|
83
|
+
}
|
|
84
|
+
.el-menu-item {
|
|
85
|
+
height: 40px !important;
|
|
86
|
+
line-height: 40px !important;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
68
90
|
.el-menu-item,
|
|
69
91
|
.el-submenu__title {
|
|
70
92
|
text-overflow: ellipsis;
|
|
@@ -100,7 +122,7 @@
|
|
|
100
122
|
// 折叠时
|
|
101
123
|
&.el-menu--collapse {
|
|
102
124
|
.el-submenu__title {
|
|
103
|
-
padding
|
|
125
|
+
padding: 5% 0 !important;
|
|
104
126
|
}
|
|
105
127
|
|
|
106
128
|
// 使用过渡动画会用span标签包裹，导致原始使用'>'选择器失效
|
|
@@ -125,8 +147,8 @@
|
|
|
125
147
|
// 顶级节点的高度以及hover时的下边框
|
|
126
148
|
> .el-menu-item,
|
|
127
149
|
> .el-submenu > .el-submenu__title {
|
|
128
|
-
height:
|
|
129
|
-
line-height:
|
|
150
|
+
height: 40px;
|
|
151
|
+
line-height: 40px;
|
|
130
152
|
|
|
131
153
|
&:hover {
|
|
132
154
|
border-bottom: 2px solid $--color-primary;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
.collapse {
|
|
2
2
|
.el-submenu__title {
|
|
3
|
+
text-align: center;
|
|
3
4
|
height: 100%;
|
|
4
|
-
|
|
5
|
-
padding-left: 25px;
|
|
6
|
-
padding-right: 23px;
|
|
5
|
+
line-height: normal !important;
|
|
7
6
|
}
|
|
8
7
|
}
|
|
9
8
|
|
|
@@ -13,7 +12,7 @@
|
|
|
13
12
|
// 菜单的文字以及hover颜色
|
|
14
13
|
.el-menu-item,
|
|
15
14
|
.el-submenu__title {
|
|
16
|
-
color:
|
|
15
|
+
color: rgb(109, 110, 110);
|
|
17
16
|
&:hover {
|
|
18
17
|
color: #f56d45;
|
|
19
18
|
}
|
|
@@ -21,7 +20,7 @@
|
|
|
21
20
|
|
|
22
21
|
// 设置了显示弹出菜单的父级
|
|
23
22
|
.el-menu--popup .popover-menu__title {
|
|
24
|
-
color:
|
|
23
|
+
color: rgb(109, 110, 110);
|
|
25
24
|
border-bottom-color: $--border-color-light;
|
|
26
25
|
}
|
|
27
26
|
|
|
@@ -71,7 +70,7 @@
|
|
|
71
70
|
// 菜单的文字以及hover颜色
|
|
72
71
|
.el-menu-item,
|
|
73
72
|
.el-submenu__title {
|
|
74
|
-
color:
|
|
73
|
+
color: rgb(109, 110, 110);
|
|
75
74
|
|
|
76
75
|
&:hover {
|
|
77
76
|
color: $menu-text-hover-color-light;
|
package/src/store/app.js
CHANGED
|
@@ -31,10 +31,10 @@ const state = {
|
|
|
31
31
|
loadingMenu: false,
|
|
32
32
|
|
|
33
33
|
// 分层结构，上下（'top-bottom'）、左右（'left-right'）
|
|
34
|
-
struct: '
|
|
34
|
+
struct: 'top-bottom',
|
|
35
35
|
|
|
36
36
|
// 导航模式，'aside'、'head'、'mix'
|
|
37
|
-
navMode: '
|
|
37
|
+
navMode: 'aside',
|
|
38
38
|
|
|
39
39
|
// 自定义渲染logo，(h, {img, title, props}) => VNode | VNode[]
|
|
40
40
|
logoSlot: undefined
|