Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
89b83b3a
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
89b83b3a
编写于
8月 13, 2020
作者:
Y
yangkaixuan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: popup add combination popup
上级
61785748
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
68 addition
and
39 deletion
+68
-39
src/packages/popup/demo.vue
src/packages/popup/demo.vue
+21
-1
src/packages/popup/overlay/overlay-manager.js
src/packages/popup/overlay/overlay-manager.js
+40
-36
src/packages/popup/popup.vue
src/packages/popup/popup.vue
+7
-2
未找到文件。
src/packages/popup/demo.vue
浏览文件 @
89b83b3a
...
...
@@ -5,7 +5,6 @@
<nut-cell
isLink
title=
"展示弹出层"
:showIcon=
"true"
@
click.native=
"showBasic = true"
>
</nut-cell>
</div>
<nut-popup
:style=
"
{ padding: '30px 50px' }" v-model="showBasic">正文
</nut-popup>
<h4>
弹出位置
</h4>
<div>
<nut-cell
isLink
title=
"顶部弹出"
:showIcon=
"true"
@
click.native=
"showTop = true"
>
</nut-cell>
...
...
@@ -42,6 +41,26 @@
</nut-popup>
<nut-cell
isLink
title=
"圆角弹框"
:showIcon=
"true"
@
click.native=
"showRound = true"
>
</nut-cell>
</div>
<h4>
组合弹框
</h4>
<div>
<nut-cell
isLink
title=
"组合弹窗"
:showIcon=
"true"
@
click.native=
"showCombination = true"
>
</nut-cell>
</div>
<nut-popup
id=
"combination"
:style=
"
{ padding: '30px 50px' }" v-model="showCombination">正文
</nut-popup>
<nut-popup
id=
"combination"
round
v-model=
"showCombination"
closeable
close-icon-position=
"top-right"
position=
"bottom"
:style=
"
{ height: '185px' }"
>
<div
class=
"box"
>
<div
class=
"icon"
>
<img
src=
"@/assets/img/wechat-icon.png"
/>
<span>
微信好友
</span></div>
<div
class=
"icon"
>
<img
src=
"@/assets/img/QQ-friends-icon.png"
/><span>
QQ好友
</span></div>
<div
class=
"icon"
>
<img
src=
"@/assets/img/circle-friends-icon.png"
/><span>
微信朋友圈
</span></div>
</div>
</nut-popup>
<h4>
指定挂载节点
</h4>
<div>
<nut-cell
isLink
title=
"指定挂载节点"
:showIcon=
"true"
@
click.native=
"getContainer = true"
>
</nut-cell>
...
...
@@ -64,6 +83,7 @@ export default {
showIconPosition
:
false
,
showCloseIcon
:
false
,
getContainer
:
false
,
showCombination
:
false
,
};
},
methods
:
{
...
...
src/packages/popup/overlay/overlay-manager.js
浏览文件 @
89b83b3a
import
Vue
from
"
vue
"
;
import
overlayComponent
from
"
./overlay.vue
"
;
import
Vue
from
'
vue
'
;
import
overlayComponent
from
'
./overlay.vue
'
;
let
modalStack
=
[];
let
_zIndex
=
2000
;
let
overlay
;
const
overlayManager
=
{
lockCount
:
0
,
get
zIndex
()
{
return
++
_zIndex
;
},
get
topStack
()
{
return
modalStack
[
modalStack
.
length
-
1
];
},
getZIndex
(
id
)
{
if
(
!
id
)
return
++
_zIndex
;
const
overlay
=
modalStack
.
find
((
res
)
=>
{
return
res
.
config
.
id
===
id
;
});
if
(
overlay
)
{
return
overlay
.
config
.
zIndex
;
}
else
{
return
++
_zIndex
;
}
},
updateOverlay
()
{
const
{
clickHandle
,
topStack
}
=
overlayManager
;
...
...
@@ -28,9 +35,7 @@ const overlayManager = {
if
(
topStack
)
{
const
{
vm
,
config
}
=
topStack
;
const
el
=
vm
.
$el
;
el
&&
el
.
parentNode
&&
el
.
parentNode
.
nodeType
!==
11
?
el
.
parentNode
.
appendChild
(
overlay
.
$el
)
:
document
.
body
.
appendChild
(
overlay
.
$el
);
el
&&
el
.
parentNode
&&
el
.
parentNode
.
nodeType
!==
11
?
el
.
parentNode
.
appendChild
(
overlay
.
$el
)
:
document
.
body
.
appendChild
(
overlay
.
$el
);
Object
.
assign
(
overlay
,
config
,
{
value
:
true
,
...
...
@@ -42,11 +47,12 @@ const overlayManager = {
//打开遮罩层
openModal
(
vm
,
config
)
{
let
{
zIndex
,
duration
,
overlayClass
,
overlayStyle
}
=
config
;
let
{
zIndex
,
duration
,
overlayClass
,
overlayStyle
,
id
}
=
config
;
modalStack
.
push
({
vm
,
config
:
{
id
,
zIndex
,
duration
,
overlayClass
,
...
...
@@ -62,7 +68,7 @@ const overlayManager = {
//防止多次点击
if
(
modalStack
.
length
&&
topStack
.
vm
.
closeOnClickOverlay
)
{
topStack
.
vm
.
$emit
(
"
click-overlay
"
);
topStack
.
vm
.
$emit
(
'
click-overlay
'
);
topStack
.
vm
.
close
();
}
},
...
...
@@ -102,26 +108,25 @@ const overlayProps = {
},
overlayClass
:
{
type
:
String
,
default
:
""
,
default
:
''
,
},
overlayStyle
:
{
type
:
Object
,
default
:
function
()
{
return
null
return
null
;
},
},
zIndex
:
{
type
:
Number
type
:
Number
,
},
};
function
mount
(
Component
,
data
)
{
const
instance
=
new
Vue
({
props
:
Component
.
props
,
render
(
h
)
{
return
h
(
Component
,
{
props
:
this
.
$props
,
props
:
this
.
$props
,
...
data
,
});
},
...
...
@@ -129,14 +134,13 @@ function mount(Component, data) {
return
instance
;
}
function
getProps
(){
if
(
!
this
)
return
{}
function
getProps
()
{
if
(
!
this
)
return
{};
let
obj
=
{};
Object
.
keys
(
overlayProps
).
forEach
(
res
=>
{
obj
[
res
]
=
this
[
res
]
})
return
obj
Object
.
keys
(
overlayProps
).
forEach
((
res
)
=>
{
obj
[
res
]
=
this
[
res
];
})
;
return
obj
;
}
export
{
overlayManager
,
overlayProps
,
getProps
};
export
{
overlayManager
,
overlayProps
,
getProps
};
src/packages/popup/popup.vue
浏览文件 @
89b83b3a
...
...
@@ -32,6 +32,10 @@ import '../icon/icon.scss';
const
overflowScrollReg
=
/scroll|auto/i
;
const
popupProps
=
{
id
:
{
type
:
String
|
Number
,
default
:
''
,
},
position
:
{
type
:
String
,
default
:
'
center
'
,
...
...
@@ -139,7 +143,8 @@ export default {
const
{
duration
,
overlayClass
,
overlayStyle
,
lockScroll
,
closeOnClickOverlay
}
=
this
;
const
config
=
{
zIndex
:
this
.
zIndex
?
this
.
zIndex
:
overlayManager
.
zIndex
,
id
:
this
.
id
,
zIndex
:
this
.
zIndex
?
this
.
zIndex
:
overlayManager
.
getZIndex
(
this
.
id
),
duration
,
overlayClass
,
overlayStyle
,
...
...
@@ -159,7 +164,7 @@ export default {
overlayManager
.
lockCount
++
;
}
this
.
$el
.
style
.
zIndex
=
this
.
zIndex
?
this
.
zIndex
+
1
:
overlayManager
.
zIndex
;
this
.
$el
.
style
.
zIndex
=
this
.
zIndex
?
this
.
zIndex
+
1
:
overlayManager
.
getZIndex
()
;
},
renderOverlay
(
config
)
{
if
(
!
this
.
value
)
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录