Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
啊嘞嘞EC
vue-vben-admin
提交
a3887f8c
V
vue-vben-admin
项目概览
啊嘞嘞EC
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
a3887f8c
编写于
11月 10, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: add tag display to the menu
上级
4baf90a5
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
76 addition
and
2 deletion
+76
-2
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+1
-0
src/components/Menu/src/MenuContent.tsx
src/components/Menu/src/MenuContent.tsx
+23
-2
src/components/Menu/src/index.less
src/components/Menu/src/index.less
+39
-0
src/router/menus/modules/dashboard.ts
src/router/menus/modules/dashboard.ts
+6
-0
src/router/types.d.ts
src/router/types.d.ts
+7
-0
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
a3887f8c
...
...
@@ -3,6 +3,7 @@
### ✨ Features
-
表单项的
`componentsProps`
支持函数类型
-
菜单新增 tag 显示
### ⚡ Performance Improvements
...
...
src/components/Menu/src/MenuContent.tsx
浏览文件 @
a3887f8c
...
...
@@ -35,6 +35,23 @@ export default defineComponent({
return
icon
?
<
Icon
icon
=
{
icon
}
size
=
{
18
}
class
=
"menu-item-icon"
/>
:
null
;
}
function
renderTag
()
{
const
{
item
,
showTitle
}
=
props
;
if
(
!
item
||
showTitle
)
return
null
;
const
{
tag
}
=
item
;
if
(
!
tag
)
return
null
;
const
{
dot
,
content
,
type
=
'
error
'
}
=
tag
;
if
(
!
dot
&&
!
content
)
return
null
;
const
cls
=
[
'
basic-menu__tag
'
];
dot
&&
cls
.
push
(
'
dot
'
);
type
&&
cls
.
push
(
type
);
return
<
span
class
=
{
cls
}
>
{
dot
?
''
:
content
}
</
span
>;
}
return
()
=>
{
if
(
!
props
.
item
)
{
return
null
;
...
...
@@ -46,17 +63,21 @@ export default defineComponent({
const
beforeStr
=
name
.
substr
(
0
,
index
);
const
afterStr
=
name
.
substr
(
index
+
searchValue
.
length
);
const
cls
=
showTitle
?
'
show-title
'
:
'
basic-menu__name
'
;
return
(
<>
{
renderIcon
(
icon
!
)
}
{
index
>
-
1
&&
searchValue
?
(
<
span
class
=
{
showTitle
?
'
show-title
'
:
''
}
>
<
span
class
=
{
cls
}
>
{
beforeStr
}
<
span
class
=
{
`basic-menu__keyword`
}
>
{
searchValue
}
</
span
>
{
afterStr
}
</
span
>
)
:
(
<
span
class
=
{
[
showTitle
?
'
show-title
'
:
''
]
}
>
{
name
}
</
span
>
<
span
class
=
{
[
cls
]
}
>
{
name
}
{
renderTag
()
}
</
span
>
)
}
</>
);
...
...
src/components/Menu/src/index.less
浏览文件 @
a3887f8c
...
...
@@ -51,6 +51,45 @@
// collapsed show title end
&__name {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
&__tag {
display: inline-block;
padding: 2px 4px;
margin-right: 4px;
font-size: 12px;
line-height: 14px;
color: #fff;
border-radius: 2px;
&.dot {
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
}
&.primary {
background: @primary-color;
}
&.error {
background: @error-color;
}
&.success {
background: @success-color;
}
&.warn {
background: @warning-color;
}
}
// scrollbar -s tart
&__content {
/* 滚动槽 */
...
...
src/router/menus/modules/dashboard.ts
浏览文件 @
a3887f8c
...
...
@@ -4,10 +4,16 @@ const menu: MenuModule = {
menu
:
{
name
:
'
Dashboard
'
,
path
:
'
/dashboard
'
,
// tag: {
// dot: true,
// },
children
:
[
{
path
:
'
/workbench
'
,
name
:
'
工作台
'
,
// tag: {
// content: 'new',
// },
},
{
path
:
'
/analysis
'
,
...
...
src/router/types.d.ts
浏览文件 @
a3887f8c
...
...
@@ -43,6 +43,11 @@ export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
props
?:
any
;
fullPath
?:
string
;
}
export
interface
MenuTag
{
type
?:
'
primary
'
|
'
error
'
|
'
warn
'
|
'
success
'
;
content
?:
string
;
dot
?:
boolean
;
}
export
interface
Menu
{
name
:
string
;
...
...
@@ -60,6 +65,8 @@ export interface Menu {
roles
?:
RoleEnum
[];
meta
?:
Partial
<
RouteMeta
>
;
tag
?:
MenuTag
;
}
export
interface
MenuModule
{
orderNo
?:
number
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录