Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
ViewDesign
ViewUIPlus
提交
ca75159a
V
ViewUIPlus
项目概览
ViewDesign
/
ViewUIPlus
上一次同步 接近 2 年
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
ViewUIPlus
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
ca75159a
编写于
6月 11, 2022
作者:
H
Hunter
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update image-preview.vue
上级
2a24a73d
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
47 addition
and
17 deletion
+47
-17
src/components/image/image-preview.vue
src/components/image/image-preview.vue
+47
-17
未找到文件。
src/components/image/image-preview.vue
浏览文件 @
ca75159a
...
...
@@ -3,9 +3,9 @@
<transition
name=
"fade"
>
<div
v-if=
"modelValue"
:class=
"[prefixCls + '-mask']"
:style=
"maskStyle"
></div>
</transition>
<
div
:class=
"[prefixCls + '-wrap']"
v-show=
"modelValue"
:style=
"maskStyl
e"
>
<
transition
name=
"fad
e"
>
<div
:class=
"[prefixCls]"
v-
if=
"modelValue"
v-
bind=
"$attrs"
@
click.stop=
"handleClickMask"
>
<
transition
name=
"fad
e"
>
<
div
:class=
"[prefixCls + '-wrap']"
v-if=
"modelValue"
:style=
"maskStyl
e"
>
<div
:class=
"[prefixCls]"
v-bind=
"$attrs"
@
click.stop=
"handleClickMask"
>
<Spin
v-if=
"status === 'loading'"
size=
"large"
:class=
"[prefixCls + '-loading']"
/>
<div
v-else-if=
"status === 'failed'"
:class=
"[prefixCls + '-fail']"
>
<span>
{{
failLang
}}
</span>
...
...
@@ -63,8 +63,8 @@
@
click.stop=
"handleClose"
/>
</div>
</
transition
>
</
div
>
</
div
>
</
transition
>
</teleport>
</
template
>
<
script
>
...
...
@@ -250,26 +250,31 @@
}
},
handleKeydown
(
event
)
{
if
(
!
this
.
modelValue
)
return
;
const
topPreview
=
this
.
getTopPreview
();
if
(
!
topPreview
.
modelValue
)
return
;
const
{
keyCode
}
=
event
;
if
(
keyCode
===
KeyCode
.
LEFT
)
t
his
.
handleSwitch
(
false
);
if
(
keyCode
===
KeyCode
.
RIGHT
)
t
his
.
handleSwitch
(
true
);
if
(
keyCode
===
KeyCode
.
UP
)
t
his
.
handleOperation
(
'
zoomIn
'
);
if
(
keyCode
===
KeyCode
.
DOWN
)
t
his
.
handleOperation
(
'
zoomOut
'
);
if
(
keyCode
===
KeyCode
.
LEFT
)
t
opPreview
.
handleSwitch
(
false
);
if
(
keyCode
===
KeyCode
.
RIGHT
)
t
opPreview
.
handleSwitch
(
true
);
if
(
keyCode
===
KeyCode
.
UP
)
t
opPreview
.
handleOperation
(
'
zoomIn
'
);
if
(
keyCode
===
KeyCode
.
DOWN
)
t
opPreview
.
handleOperation
(
'
zoomOut
'
);
if
(
keyCode
===
KeyCode
.
SPACE
)
{
event
.
preventDefault
();
t
his
.
original
=
!
this
.
original
;
t
opPreview
.
original
=
!
topPreview
.
original
;
}
},
handleKeyup
(
event
)
{
if
(
!
this
.
modelValue
)
return
;
const
topPreview
=
this
.
getTopPreview
();
if
(
!
topPreview
.
modelValue
)
return
;
const
{
keyCode
}
=
event
;
if
(
keyCode
===
KeyCode
.
ESC
)
this
.
handleClose
();
if
(
keyCode
===
KeyCode
.
ESC
)
{
topPreview
.
handleClose
();
}
},
handleWheel
(
event
)
{
if
(
!
this
.
modelValue
)
return
;
const
topPreview
=
this
.
getTopPreview
();
if
(
!
topPreview
.
modelValue
)
return
;
const
{
deltaY
}
=
event
;
t
his
.
handleOperation
(
deltaY
<
0
?
'
zoomIn
'
:
'
zoomOut
'
);
t
opPreview
.
handleOperation
(
deltaY
<
0
?
'
zoomIn
'
:
'
zoomOut
'
);
},
handleMousedown
(
event
)
{
const
{
pageX
,
pageY
,
which
}
=
event
;
...
...
@@ -306,10 +311,33 @@
handleImageError
()
{
this
.
status
=
'
failed
'
;
},
getMaskIndex
()
{
getMaskIndex
()
{
transferIncrease
();
return
transferIndex
;
},
addImagePreview
()
{
const
root
=
this
.
$root
;
if
(
!
root
.
imagePreviewList
)
root
.
imagePreviewList
=
[];
root
.
imagePreviewList
.
push
({
id
:
this
.
id
,
modal
:
this
});
},
removeImagePreview
()
{
const
root
=
this
.
$root
;
if
(
!
root
.
imagePreviewList
)
return
;
const
index
=
root
.
imagePreviewList
.
findIndex
(
item
=>
item
.
id
===
this
.
id
);
root
.
imagePreviewList
.
splice
(
index
,
1
);
},
getTopPreview
()
{
const
previews
=
this
.
$root
.
imagePreviewList
.
map
(
item
=>
item
.
modal
).
filter
(
item
=>
item
.
modelValue
);
const
topPreview
=
previews
.
sort
((
a
,
b
)
=>
{
return
a
.
$data
.
maskIndex
<
b
.
$data
.
maskIndex
?
1
:
-
1
;
})[
0
];
return
topPreview
&&
topPreview
.
maskIndex
===
this
.
maskIndex
?
topPreview
:
{};
}
},
watch
:
{
modelValue
(
val
)
{
...
...
@@ -319,7 +347,6 @@
this
.
original
=
false
;
this
.
prevOverflow
=
this
.
getBodyOverflow
();
this
.
setBodyOverflow
(
'
hidden
'
);
this
.
maskIndex
=
this
.
getMaskIndex
();
}
else
{
this
.
setBodyOverflow
(
this
.
prevOverflow
);
}
...
...
@@ -329,11 +356,14 @@
}
},
mounted
()
{
this
.
maskIndex
=
this
.
getMaskIndex
();
this
.
addImagePreview
();
on
(
document
,
'
keydown
'
,
this
.
handleKeydown
);
on
(
document
,
'
keyup
'
,
this
.
handleKeyup
);
on
(
document
,
'
wheel
'
,
this
.
handleWheel
);
},
beforeUnmount
()
{
this
.
removeImagePreview
();
off
(
document
,
'
keydown
'
,
this
.
handleKeydown
);
off
(
document
,
'
keyup
'
,
this
.
handleKeyup
);
off
(
document
,
'
wheel
'
,
this
.
handleWheel
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录