Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
ViewDesign
ViewUIPlus
提交
06256dbc
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,发现更多精彩内容 >>
提交
06256dbc
编写于
6月 11, 2022
作者:
H
Hunter
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
revert preview
上级
4b28d806
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
83 addition
and
65 deletion
+83
-65
src/components/image/image-preview.vue
src/components/image/image-preview.vue
+53
-50
src/styles/components/image-preview.less
src/styles/components/image-preview.less
+30
-15
未找到文件。
src/components/image/image-preview.vue
浏览文件 @
06256dbc
<
template
>
<teleport
to=
"body"
:disabled=
"!transfer"
>
<transition
name=
"fade"
>
<div
:class=
"[prefixCls + '-wrapper']"
v-if=
"modelValue"
>
<div
:class=
"[prefixCls + '-mark']"
v-if=
"previewList.length > 0"
@
click.stop=
"handleClickMark"
>
<Spin
v-if=
"status === 'loading'"
size=
"large"
/>
<div
v-else-if=
"status === 'failed'"
:class=
"[prefixCls + '-fail']"
>
<div
v-if=
"modelValue"
:class=
"[prefixCls + '-mask']"
:style=
"maskStyle"
></div>
</transition>
<transition
name=
"fade"
>
<div
:class=
"[prefixCls + '-wrap']"
v-if=
"modelValue"
:style=
"maskStyle"
>
<div
:class=
"[prefixCls]"
v-if=
"modelValue"
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>
</div>
<img
:src=
"currentSrc"
:key=
"currentIndex.toString()"
v-show=
"status === 'loaded'"
:style=
"imageStyle"
:class=
"imgClasses"
@
click.stop
...
...
@@ -24,30 +20,30 @@
@
load=
"handleImageLoad"
@
error=
"handleImageError"
/>
<div
:class=
"[prefixCls + '-operations']"
>
<svg
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('zoomIn')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"7197"
width=
"200"
height=
"200"
><path
d=
"M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
p-id=
"7198"
fill=
"#ffffff"
></path><path
d=
"M921 867L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
p-id=
"7199"
fill=
"#ffffff"
></path></svg>
<svg
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('zoomOut')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"7412"
width=
"200"
height=
"200"
><path
d=
"M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
p-id=
"7413"
fill=
"#ffffff"
></path><path
d=
"M921 867L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
p-id=
"7414"
fill=
"#ffffff"
></path></svg>
<svg
v-show=
"!this.original"
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('original')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"26672"
width=
"200"
height=
"200"
><path
d=
"M358.058667 128H156.970667A28.970667 28.970667 0 0 0 128 157.013333v202.837334c0 7.978667 6.528 14.506667 14.506667 14.506666h43.434666a14.506667 14.506667 0 0 0 14.506667-14.506666V200.448h157.610667a14.506667 14.506667 0 0 0 14.506666-14.506667V142.506667a14.506667 14.506667 0 0 0-14.506666-14.506667zM881.493333 649.642667h-43.434666a14.506667 14.506667 0 0 0-14.506667 14.506666v159.402667h-157.610667a14.506667 14.506667 0 0 0-14.506666 14.506667v43.434666c0 7.978667 6.570667 14.506667 14.506666 14.506667h201.088c16 0 28.970667-12.928 28.970667-29.013333v-202.837334a14.506667 14.506667 0 0 0-14.506667-14.506666zM358.058667 823.552H200.448v-159.402667a14.506667 14.506667 0 0 0-14.506667-14.506666H142.506667a14.506667 14.506667 0 0 0-14.506667 14.506666v202.88c0 16 12.970667 28.970667 29.013333 28.970667h201.045334a14.506667 14.506667 0 0 0 14.506666-14.506667v-43.434666a14.506667 14.506667 0 0 0-14.506666-14.506667zM866.986667 128h-201.088a14.506667 14.506667 0 0 0-14.506667 14.506667v43.434666c0 7.978667 6.570667 14.506667 14.506667 14.506667h157.610666v159.402667c0 7.978667 6.528 14.506667 14.506667 14.506666h43.434667a14.506667 14.506667 0 0 0 14.506666-14.506666V156.970667A28.928 28.928 0 0 0 866.986667 128z"
p-id=
"26673"
fill=
"#ffffff"
></path></svg>
<svg
v-show=
"this.original"
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('original')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"1976"
width=
"200"
height=
"200"
><path
d=
"M864 128H160c-19.2 0-32 12.8-32 32v704c0 19.2 12.8 32 32 32h704c19.2 0 32-12.8 32-32V160c0-19.2-12.8-32-32-32z m-32 704H192V192h640v640z"
p-id=
"1977"
fill=
"#ffffff"
></path><path
d=
"M320 384v288c0 19.2 12.8 32 32 32s32-12.8 32-32V352c0-19.2-12.8-32-32-32h-32c-19.2 0-32 12.8-32 32s12.8 32 32 32zM640 384v288c0 19.2 12.8 32 32 32s32-12.8 32-32V352c0-19.2-12.8-32-32-32h-32c-19.2 0-32 12.8-32 32s12.8 32 32 32z"
p-id=
"1978"
fill=
"#ffffff"
></path><path
d=
"M512 384m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"
p-id=
"1979"
fill=
"#ffffff"
></path><path
d=
"M512 640m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"
p-id=
"1980"
fill=
"#ffffff"
></path></svg>
<svg
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('rotateLeft')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"13308"
width=
"200"
height=
"200"
><path
d=
"M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H188V494h440v326z m191.3-491.5c-78.8-100.7-196-153.6-314.6-154.2l-0.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7 0.4 12.6-6.1v-63.9c12.9 0.1 25.9 0.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-0.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3z"
p-id=
"13309"
fill=
"#ffffff"
></path></svg>
<svg
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('rotateRight')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"13521"
width=
"200"
height=
"200"
><path
d=
"M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-0.4-12.6 6.1l-0.2 64c-118.6 0.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-0.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8zM880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H396V494h440v326z"
p-id=
"13522"
fill=
"#ffffff"
></path></svg>
</div>
<Icon
:class=
"[prefixCls + '-arrow-left',
{ [prefixCls + '-arrow-disabled']: hasLeftSwitchEnd }]"
type="ios-arrow-back"
@click.stop="handleSwitch(false)"
/>
<Icon
:class=
"[prefixCls + '-arrow-right',
{ [prefixCls + '-arrow-disabled']: hasRightSwitchEnd }]"
type="ios-arrow-forward"
@click.stop="handleSwitch(true)"
/>
<Icon
:class=
"[prefixCls + '-arrow-close']"
type=
"md-close"
@
click.stop=
"handleClose"
/>
</div>
<div
:class=
"[prefixCls + '-operations']"
>
<svg
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('zoomIn')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"7197"
width=
"200"
height=
"200"
><path
d=
"M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
p-id=
"7198"
fill=
"#ffffff"
></path><path
d=
"M921 867L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
p-id=
"7199"
fill=
"#ffffff"
></path></svg>
<svg
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('zoomOut')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"7412"
width=
"200"
height=
"200"
><path
d=
"M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
p-id=
"7413"
fill=
"#ffffff"
></path><path
d=
"M921 867L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
p-id=
"7414"
fill=
"#ffffff"
></path></svg>
<svg
v-show=
"!this.original"
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('original')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"26672"
width=
"200"
height=
"200"
><path
d=
"M358.058667 128H156.970667A28.970667 28.970667 0 0 0 128 157.013333v202.837334c0 7.978667 6.528 14.506667 14.506667 14.506666h43.434666a14.506667 14.506667 0 0 0 14.506667-14.506666V200.448h157.610667a14.506667 14.506667 0 0 0 14.506666-14.506667V142.506667a14.506667 14.506667 0 0 0-14.506666-14.506667zM881.493333 649.642667h-43.434666a14.506667 14.506667 0 0 0-14.506667 14.506666v159.402667h-157.610667a14.506667 14.506667 0 0 0-14.506666 14.506667v43.434666c0 7.978667 6.570667 14.506667 14.506666 14.506667h201.088c16 0 28.970667-12.928 28.970667-29.013333v-202.837334a14.506667 14.506667 0 0 0-14.506667-14.506666zM358.058667 823.552H200.448v-159.402667a14.506667 14.506667 0 0 0-14.506667-14.506666H142.506667a14.506667 14.506667 0 0 0-14.506667 14.506666v202.88c0 16 12.970667 28.970667 29.013333 28.970667h201.045334a14.506667 14.506667 0 0 0 14.506666-14.506667v-43.434666a14.506667 14.506667 0 0 0-14.506666-14.506667zM866.986667 128h-201.088a14.506667 14.506667 0 0 0-14.506667 14.506667v43.434666c0 7.978667 6.570667 14.506667 14.506667 14.506667h157.610666v159.402667c0 7.978667 6.528 14.506667 14.506667 14.506666h43.434667a14.506667 14.506667 0 0 0 14.506666-14.506666V156.970667A28.928 28.928 0 0 0 866.986667 128z"
p-id=
"26673"
fill=
"#ffffff"
></path></svg>
<svg
v-show=
"this.original"
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('original')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"1976"
width=
"200"
height=
"200"
><path
d=
"M864 128H160c-19.2 0-32 12.8-32 32v704c0 19.2 12.8 32 32 32h704c19.2 0 32-12.8 32-32V160c0-19.2-12.8-32-32-32z m-32 704H192V192h640v640z"
p-id=
"1977"
fill=
"#ffffff"
></path><path
d=
"M320 384v288c0 19.2 12.8 32 32 32s32-12.8 32-32V352c0-19.2-12.8-32-32-32h-32c-19.2 0-32 12.8-32 32s12.8 32 32 32zM640 384v288c0 19.2 12.8 32 32 32s32-12.8 32-32V352c0-19.2-12.8-32-32-32h-32c-19.2 0-32 12.8-32 32s12.8 32 32 32z"
p-id=
"1978"
fill=
"#ffffff"
></path><path
d=
"M512 384m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"
p-id=
"1979"
fill=
"#ffffff"
></path><path
d=
"M512 640m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"
p-id=
"1980"
fill=
"#ffffff"
></path></svg>
<svg
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('rotateLeft')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"13308"
width=
"200"
height=
"200"
><path
d=
"M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H188V494h440v326z m191.3-491.5c-78.8-100.7-196-153.6-314.6-154.2l-0.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7 0.4 12.6-6.1v-63.9c12.9 0.1 25.9 0.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-0.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3z"
p-id=
"13309"
fill=
"#ffffff"
></path></svg>
<svg
:class=
"[prefixCls + '-operations-item']"
@
click.stop=
"handleOperation('rotateRight')"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"13521"
width=
"200"
height=
"200"
><path
d=
"M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-0.4-12.6 6.1l-0.2 64c-118.6 0.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-0.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8zM880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H396V494h440v326z"
p-id=
"13522"
fill=
"#ffffff"
></path></svg>
</div>
<Icon
:class=
"[prefixCls + '-arrow-left',
{ [prefixCls + '-arrow-disabled']: hasLeftSwitchEnd }]"
type="ios-arrow-back"
@click.stop="handleSwitch(false)"
/>
<Icon
:class=
"[prefixCls + '-arrow-right',
{ [prefixCls + '-arrow-disabled']: hasRightSwitchEnd }]"
type="ios-arrow-forward"
@click.stop="handleSwitch(true)"
/>
<Icon
:class=
"[prefixCls + '-arrow-close']"
type=
"md-close"
@
click.stop=
"handleClose"
/>
</div>
</transition>
</teleport>
...
...
@@ -61,6 +57,7 @@
import
Icon
from
'
../icon/icon.vue
'
;
import
KeyCode
from
'
../../utils/keyCode
'
;
import
Spin
from
'
../spin/spin.vue
'
;
import
{
transferIndex
,
transferIncrease
}
from
'
../../utils/transfer-queue
'
;
const
prefixCls
=
'
ivu-image-preview
'
;
...
...
@@ -112,25 +109,21 @@
transition
:
true
,
original
:
false
,
// display by original size
prevOverflow
:
''
,
// prevent body scrolling
status
:
'
loading
'
// image status
status
:
'
loading
'
,
// image status
zIndex
:
1000
,
maskIndex
:
this
.
getMaskIndex
()
}
},
computed
:
{
operations
()
{
return
[
{
icon
:
'
ios-add-circle-outline
'
,
value
:
'
zoomIn
'
},
{
icon
:
'
ios-remove-circle-outline
'
,
value
:
'
zoomOut
'
},
{
icon
:
this
.
original
?
'
ios-barcode-outline
'
:
'
ios-qr-scanner
'
,
value
:
'
original
'
},
{
icon
:
'
ios-refresh
'
,
value
:
'
rotateLeft
'
},
{
icon
:
'
ios-refresh
'
,
value
:
'
rotateRight
'
}
]
},
imgClasses
()
{
return
{
[
prefixCls
+
'
-image
'
]:
true
,
[
prefixCls
+
'
-image-transition
'
]:
this
.
transition
,
[
prefixCls
+
'
-image-limit
'
]:
!
this
.
original
};
return
[
prefixCls
+
'
-image
'
,
{
[
prefixCls
+
'
-hidden
'
]:
this
.
status
===
'
failed
'
,
[
prefixCls
+
'
-transition
'
]:
this
.
transition
,
[
prefixCls
+
'
-limit
'
]:
!
this
.
original
}
];
},
imageStyle
()
{
let
translateX
=
this
.
translate
.
x
/
this
.
scale
;
...
...
@@ -155,6 +148,11 @@
`
};
},
maskStyle
()
{
return
{
zIndex
:
this
.
maskIndex
+
this
.
zIndex
};
},
hasRightSwitchEnd
()
{
const
{
currentIndex
,
infinite
,
previewList
}
=
this
;
const
len
=
previewList
.
length
;
...
...
@@ -182,7 +180,7 @@
this
.
$emit
(
'
update:modelValue
'
,
false
);
this
.
$emit
(
'
on-close
'
);
},
handleClickMa
r
k
()
{
handleClickMa
s
k
()
{
if
(
!
this
.
maskClosable
)
return
;
this
.
handleClose
();
},
...
...
@@ -278,6 +276,10 @@
},
handleImageError
()
{
this
.
status
=
'
failed
'
;
},
getMaskIndex
()
{
transferIncrease
();
return
transferIndex
;
}
},
watch
:
{
...
...
@@ -288,6 +290,7 @@
this
.
original
=
false
;
this
.
prevOverflow
=
this
.
getBodyOverflow
();
this
.
setBodyOverflow
(
'
hidden
'
);
this
.
maskIndex
=
this
.
getMaskIndex
();
}
else
{
this
.
setBodyOverflow
(
this
.
prevOverflow
);
}
...
...
src/styles/components/image-preview.less
浏览文件 @
06256dbc
@image-preview-prefix-cls: ~"@{css-prefix}image-preview";
.@{image-preview-prefix-cls} {
&-wrapper {
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
&-mask {
.mask;
}
&-wrap {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
user-select: none;
overflow: hidden;
}
&-mark {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
&-transition {
transition: transform .3s ease;
}
&-image {
&-transition {
transition: transform .3s ease;
}
&-limit {
max-width: 100%;
max-height: 100%;
}
&-limit {
max-width: 100%;
max-height: 100%;
}
&-loading, &-fail {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&-fail {
color: @white;
font-size: @font-size-large;
}
&-hidden {
display: none;
}
&-operations {
display: flex;
height: 40px;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录