Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zuiqiangwanggong
vue-vben-admin
提交
f645680a
V
vue-vben-admin
项目概览
zuiqiangwanggong
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
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,发现更多精彩内容 >>
提交
f645680a
编写于
11月 01, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: right-click menu supports multiple levels
上级
c8021ef3
变更
15
显示空白变更内容
内联
并排
Showing
15 changed file
with
138 addition
and
52 deletion
+138
-52
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+2
-1
src/components/ContextMenu/src/index.less
src/components/ContextMenu/src/index.less
+31
-23
src/components/ContextMenu/src/index.tsx
src/components/ContextMenu/src/index.tsx
+35
-14
src/components/Description/src/index.tsx
src/components/Description/src/index.tsx
+10
-1
src/components/Description/src/useDescription.ts
src/components/Description/src/useDescription.ts
+3
-2
src/components/Icon/index.tsx
src/components/Icon/index.tsx
+2
-0
src/components/Menu/src/BasicMenu.tsx
src/components/Menu/src/BasicMenu.tsx
+2
-0
src/components/Menu/src/useSearchInput.ts
src/components/Menu/src/useSearchInput.ts
+2
-0
src/components/Preview/src/index.tsx
src/components/Preview/src/index.tsx
+1
-0
src/hooks/web/useWatermark.ts
src/hooks/web/useWatermark.ts
+3
-2
src/router/routes/modules/demo/feat.ts
src/router/routes/modules/demo/feat.ts
+2
-2
src/views/demo/comp/button/index.vue
src/views/demo/comp/button/index.vue
+0
-2
src/views/demo/feat/click-out-side/index.vue
src/views/demo/feat/click-out-side/index.vue
+2
-2
src/views/demo/feat/context-menu/index.vue
src/views/demo/feat/context-menu/index.vue
+42
-1
src/views/demo/feat/icon/index.vue
src/views/demo/feat/icon/index.vue
+1
-2
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
f645680a
...
...
@@ -3,6 +3,7 @@
### ✨ Features
-
全局 loading 添加文本
-
右键菜单支持多级
### 🎫 Chores
...
...
@@ -13,7 +14,7 @@
-
Layout 界面布局样式调整
-
优化表格渲染性能
-
表单折叠搜索添图标添加动画
-
routeModule 可以忽略 layou 配置不写。方便配置一级菜单
-
routeModule 可以忽略 layou
t
配置不写。方便配置一级菜单
### 🐛 Bug Fixes
...
...
src/components/ContextMenu/src/index.less
浏览文件 @
f645680a
@import (reference) '../../../design/index.less';
.item-style() {
li {
display: inline-block;
width: 100%;
height: 46px !important;
margin: 0 !important;
line-height: 46px;
span {
line-height: 46px;
}
> div {
margin: 0 !important;
}
&:hover {
color: @text-color-base;
background: #eee;
}
}
}
.context-menu {
position: fixed;
top: 0;
...
...
@@ -18,32 +41,17 @@
background-clip: padding-box;
user-select: none;
&.hidden {
display: none !important;
}
&__item {
a {
display: inline-block;
width: 100%;
padding: 10px 14px;
.item-style();
&:hover {
color: @text-color-base;
background: #eee;
.ant-divider {
margin: 0 0;
}
}
&.disabled {
a {
color: @disabled-color;
cursor: not-allowed;
&:hover {
color: @disabled-color;
background: unset;
}
}
&__popup {
.ant-divider {
margin: 0 0;
}
.item-style();
}
}
src/components/ContextMenu/src/index.tsx
浏览文件 @
f645680a
...
...
@@ -8,9 +8,13 @@ import {
unref
,
onUnmounted
,
}
from
'
vue
'
;
import
{
props
}
from
'
./props
'
;
import
Icon
from
'
/@/components/Icon
'
;
import
{
Menu
,
Divider
}
from
'
ant-design-vue
'
;
import
type
{
ContextMenuItem
}
from
'
./types
'
;
import
'
./index.less
'
;
const
prefixCls
=
'
context-menu
'
;
export
default
defineComponent
({
...
...
@@ -43,12 +47,13 @@ export default defineComponent({
top
:
(
body
.
clientHeight
<
y
+
menuHeight
?
y
-
menuHeight
:
y
)
+
'
px
'
,
};
});
function
handleAction
(
item
:
ContextMenuItem
,
e
:
MouseEvent
)
{
state
.
show
=
false
;
const
{
handler
,
disabled
}
=
item
;
if
(
disabled
)
{
return
;
}
state
.
show
=
false
;
if
(
e
)
{
e
.
stopPropagation
();
e
.
preventDefault
();
...
...
@@ -61,31 +66,47 @@ export default defineComponent({
const
{
showIcon
}
=
props
;
return
(
<
span
style
=
"display: inline-block; width: 100%;"
>
<
span
style
=
"display: inline-block; width: 100%;"
onClick
=
{
handleAction
.
bind
(
null
,
item
)
}
>
{
showIcon
&&
icon
&&
<
Icon
class
=
"mr-2"
icon
=
{
icon
}
/>
}
<
span
>
{
label
}
</
span
>
</
span
>
);
}
function
renderMenuItem
(
items
:
ContextMenuItem
[])
{
return
items
.
map
((
item
)
=>
{
const
{
disabled
,
label
}
=
item
;
return
items
.
map
((
item
,
index
)
=>
{
const
{
disabled
,
label
,
children
,
divider
=
false
}
=
item
;
return
(
<
li
class
=
{
`
${
prefixCls
}
__item
${
disabled
?
'
disabled
'
:
''
}
`
}
key
=
{
label
}
>
<
a
onClick
=
{
handleAction
.
bind
(
null
,
item
)
}
style
=
"color:#333;"
>
{
renderContent
(
item
)
}
</
a
>
</
li
>
const
DividerComp
=
divider
?
<
Divider
key
=
{
`d-
${
index
}
`
}
/>
:
null
;
if
(
!
children
||
children
.
length
===
0
)
{
return
[
<
Menu
.
Item
disabled
=
{
disabled
}
class
=
{
`
${
prefixCls
}
__item`
}
key
=
{
label
}
>
{
()
=>
[
renderContent
(
item
)]
}
</
Menu
.
Item
>,
DividerComp
,
];
}
return
!
state
.
show
?
null
:
(
<
Menu
.
SubMenu
key
=
{
label
}
disabled
=
{
disabled
}
popupClassName
=
{
`
${
prefixCls
}
__popup `
}
>
{
{
title
:
()
=>
renderContent
(
item
),
default
:
()
=>
[
renderMenuItem
(
children
)],
}
}
</
Menu
.
SubMenu
>
);
});
}
return
()
=>
{
const
{
items
}
=
props
;
return
(
<
ul
class
=
{
[
prefixCls
,
!
state
.
show
&&
'
hidden
'
]
}
ref
=
{
wrapRef
}
style
=
{
unref
(
getStyle
)
}
>
{
renderMenuItem
(
items
)
}
</
ul
>
return
!
state
.
show
?
null
:
(
<
Menu
inlineIndent
=
{
12
}
mode
=
"vertical"
class
=
{
[
prefixCls
]
}
ref
=
{
wrapRef
}
style
=
{
unref
(
getStyle
)
}
>
{
()
=>
renderMenuItem
(
items
)
}
</
Menu
>
);
};
},
...
...
src/components/Description/src/index.tsx
浏览文件 @
f645680a
...
...
@@ -23,6 +23,7 @@ export default defineComponent({
...
unref
(
propsRef
),
};
});
const
getProps
=
computed
(()
=>
{
const
opt
=
{
...
props
,
...
...
@@ -31,12 +32,14 @@ export default defineComponent({
};
return
opt
;
});
/**
* @description: 是否使用标题
*/
const
useWrapper
=
computed
(()
=>
{
return
!!
unref
(
getMergeProps
).
title
;
});
/**
* @description: 获取配置Collapse
*/
...
...
@@ -49,6 +52,7 @@ export default defineComponent({
};
}
);
/**
* @description:设置desc
*/
...
...
@@ -57,9 +61,11 @@ export default defineComponent({
const
mergeProps
=
deepMerge
(
unref
(
propsRef
)
||
{},
descProps
);
propsRef
.
value
=
cloneDeep
(
mergeProps
);
}
const
methods
:
DescInstance
=
{
setDescProps
,
};
emit
(
'
register
'
,
methods
);
// 防止换行
...
...
@@ -95,6 +101,7 @@ export default defineComponent({
const
width
=
contentMinWidth
;
return
(
// @ts-ignore
<
Descriptions
.
Item
label
=
{
renderLabel
(
item
)
}
key
=
{
field
}
span
=
{
span
}
>
{
()
=>
contentMinWidth
?
(
...
...
@@ -113,13 +120,15 @@ export default defineComponent({
);
});
}
const
renderDesc
=
()
=>
{
return
(
<
Descriptions
class
=
{
`
${
prefixCls
}
`
}
{
...{
...
attrs
,
...
unref
(
getProps
)
}
}
>
<
Descriptions
class
=
{
`
${
prefixCls
}
`
}
{
...{
...
attrs
,
...
(
unref
(
getProps
)
as
any
)
}
}
>
{
()
=>
renderItem
()
}
</
Descriptions
>
);
};
const
renderContainer
=
()
=>
{
const
content
=
props
.
useCollapse
?
renderDesc
()
:
<
div
>
{
renderDesc
()
}
</
div
>;
// 减少dom层级
...
...
src/components/Description/src/useDescription.ts
浏览文件 @
f645680a
...
...
@@ -10,7 +10,7 @@ export function useDescription(props?: Partial<DescOptions>): UseDescReturnType
const
descRef
=
ref
<
DescInstance
|
null
>
(
null
);
const
loadedRef
=
ref
(
false
);
function
getDescription
(
instance
:
DescInstance
)
{
function
register
(
instance
:
DescInstance
)
{
if
(
unref
(
loadedRef
)
&&
isProdMode
())
{
return
;
}
...
...
@@ -18,10 +18,11 @@ export function useDescription(props?: Partial<DescOptions>): UseDescReturnType
props
&&
instance
.
setDescProps
(
props
);
loadedRef
.
value
=
true
;
}
const
methods
:
DescInstance
=
{
setDescProps
:
(
descProps
:
Partial
<
DescOptions
>
):
void
=>
{
unref
(
descRef
)
!
.
setDescProps
(
descProps
);
},
};
return
[
getDescription
,
methods
];
return
[
register
,
methods
];
}
src/components/Icon/index.tsx
浏览文件 @
f645680a
...
...
@@ -32,6 +32,7 @@ export default defineComponent({
const
{
icon
,
prefix
}
=
props
;
return
`
${
prefix
?
prefix
+
'
:
'
:
''
}${
icon
}
`
;
});
const
update
=
async
()
=>
{
const
el
=
unref
(
elRef
);
if
(
el
)
{
...
...
@@ -67,6 +68,7 @@ export default defineComponent({
});
watch
(()
=>
props
.
icon
,
update
,
{
flush
:
'
post
'
});
onMounted
(
update
);
return
()
=>
(
...
...
src/components/Menu/src/BasicMenu.tsx
浏览文件 @
f645680a
...
...
@@ -55,6 +55,7 @@ export default defineComponent({
}
return
menuState
.
openKeys
;
});
// menu外层样式
const
getMenuWrapStyle
=
computed
(():
any
=>
{
const
{
showLogo
,
search
}
=
props
;
...
...
@@ -130,6 +131,7 @@ export default defineComponent({
menuState
.
selectedKeys
=
[
path
];
emit
(
'
menuClick
'
,
menu
);
}
function
handleMenuChange
()
{
const
{
flatItems
}
=
props
;
if
(
!
unref
(
flatItems
)
||
flatItems
.
length
===
0
)
{
...
...
src/components/Menu/src/useSearchInput.ts
浏览文件 @
f645680a
...
...
@@ -48,9 +48,11 @@ export function useSearchInput({
openKeys
=
es6Unique
(
openKeys
);
menuState
.
openKeys
=
openKeys
;
}
// 搜索框点击
function
handleInputClick
(
e
:
any
):
void
{
emit
(
'
clickSearchInput
'
,
e
);
}
return
{
handleInputChange
,
handleInputClick
};
}
src/components/Preview/src/index.tsx
浏览文件 @
f645680a
...
...
@@ -219,6 +219,7 @@ export default defineComponent({
</
div
>
);
};
const
renderIndex
=
()
=>
{
if
(
!
unref
(
getIsMultipleImage
))
{
return
null
;
...
...
src/hooks/web/useWatermark.ts
浏览文件 @
f645680a
...
...
@@ -3,6 +3,7 @@ import { getCurrentInstance, onBeforeUnmount, ref, Ref, unref } from 'vue';
const
domSymbol
=
Symbol
(
'
watermark-dom
'
);
export
function
useWatermark
(
appendEl
:
Ref
<
HTMLElement
|
null
>
=
ref
(
document
.
body
))
{
let
func
:
Fn
=
()
=>
{};
const
id
=
domSymbol
.
toString
();
const
clear
=
()
=>
{
const
domId
=
document
.
getElementById
(
id
);
...
...
@@ -10,6 +11,7 @@ export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.bo
const
el
=
unref
(
appendEl
);
el
&&
el
.
removeChild
(
domId
);
}
window
.
addEventListener
(
'
resize
'
,
func
);
};
const
createWatermark
=
(
str
:
string
)
=>
{
clear
();
...
...
@@ -45,7 +47,7 @@ export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.bo
function
setWatermark
(
str
:
string
)
{
createWatermark
(
str
);
const
func
=
()
=>
{
func
=
()
=>
{
createWatermark
(
str
);
};
window
.
addEventListener
(
'
resize
'
,
func
);
...
...
@@ -53,7 +55,6 @@ export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.bo
if
(
instance
)
{
onBeforeUnmount
(()
=>
{
clear
();
window
.
addEventListener
(
'
resize
'
,
func
);
});
}
}
...
...
src/router/routes/modules/demo/feat.ts
浏览文件 @
f645680a
...
...
@@ -18,7 +18,7 @@ export default {
{
path
:
'
/icon
'
,
name
:
'
IconDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/
comp
/icon/index.vue
'
),
component
:
()
=>
import
(
'
/@/views/demo/
feat
/icon/index.vue
'
),
meta
:
{
title
:
'
图标
'
,
},
...
...
@@ -43,7 +43,7 @@ export default {
{
path
:
'
/click-out-side
'
,
name
:
'
ClickOutSideDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/
comp
/click-out-side/index.vue
'
),
component
:
()
=>
import
(
'
/@/views/demo/
feat
/click-out-side/index.vue
'
),
meta
:
{
title
:
'
ClickOutSide组件
'
,
},
...
...
src/views/demo/comp/button/index.vue
浏览文件 @
f645680a
...
...
@@ -7,8 +7,6 @@
show-icon
/>
<Alert
message=
"按钮扩展"
type=
"info"
show-icon
class=
"mt-4"
/>
<div
class=
"my-2"
>
<h3>
success
</h3>
<a-button
color=
"success"
>
成功
</a-button>
...
...
src/views/demo/
comp
/click-out-side/index.vue
→
src/views/demo/
feat
/click-out-side/index.vue
浏览文件 @
f645680a
<
template
>
<div
class=
"p
x
-10"
>
<Alert
message=
"点内外部触发事件"
show-icon
class=
"mt-4"
></Alert>
<div
class=
"p-10"
>
<Alert
message=
"点内外部触发事件"
show-icon
></Alert>
<ClickOutSide
@
clickOutside=
"handleClickOutside"
class=
"flex justify-center mt-10"
>
<div
@
click=
"innerClick"
class=
"demo-box"
>
{{
text
}}
...
...
src/views/demo/feat/context-menu/index.vue
浏览文件 @
f645680a
...
...
@@ -3,6 +3,10 @@
<CollapseContainer
title=
"Simple"
>
<a-button
type=
"primary"
@
contextmenu=
"handleContext"
>
Right Click on me
</a-button>
</CollapseContainer>
<CollapseContainer
title=
"Multiple"
class=
"mt-4"
>
<a-button
type=
"primary"
@
contextmenu=
"handleMultipleContext"
>
Right Click on me
</a-button>
</CollapseContainer>
</div>
</
template
>
<
script
lang=
"ts"
>
...
...
@@ -36,7 +40,44 @@
],
});
}
return
{
handleContext
};
function
handleMultipleContext
(
e
:
MouseEvent
)
{
createContextMenu
({
event
:
e
,
items
:
[
{
label
:
'
New
'
,
icon
:
'
ant-design:plus-outlined
'
,
children
:
[
{
label
:
'
New1-1
'
,
icon
:
'
ant-design:plus-outlined
'
,
divider
:
true
,
children
:
[
{
label
:
'
New1-1-1
'
,
handler
:
()
=>
{
createMessage
.
success
(
'
click new
'
);
},
},
{
label
:
'
New1-2-1
'
,
disabled
:
true
,
},
],
},
{
label
:
'
New1-2
'
,
icon
:
'
ant-design:plus-outlined
'
,
},
],
},
],
});
}
return
{
handleContext
,
handleMultipleContext
};
},
});
</
script
>
src/views/demo/
comp
/icon/index.vue
→
src/views/demo/
feat
/icon/index.vue
浏览文件 @
f645680a
...
...
@@ -12,7 +12,7 @@
</div>
</CollapseContainer>
<CollapseContainer
title=
"IconIfy 组件使用"
class=
"m
t
-5"
>
<CollapseContainer
title=
"IconIfy 组件使用"
class=
"m
y
-5"
>
<div
class=
"flex justify-around flex-wrap"
>
<Icon
icon=
"fa-solid:address-book"
:size=
"30"
/>
<Icon
icon=
"mdi-light:bank"
:size=
"30"
/>
...
...
@@ -23,7 +23,6 @@
<Alert
show-icon
class=
"mt-5"
message=
"推荐使用Iconify组件"
description=
"Icon组件基本包含所有的图标,在下面网址内你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。唯一不足的可能就是需要连接外网进行使用。"
/>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录