|
@@ -5,7 +5,7 @@
|
|
title="图片预览"
|
|
title="图片预览"
|
|
fullscreen
|
|
fullscreen
|
|
footer-hide
|
|
footer-hide
|
|
- :mask-closable="false"
|
|
|
|
|
|
+ @on-visible-change="visibleChange"
|
|
>
|
|
>
|
|
<div slot="header"></div>
|
|
<div slot="header"></div>
|
|
<div :class="[`${prefixCls}-close`]" @click="cancel">
|
|
<div :class="[`${prefixCls}-close`]" @click="cancel">
|
|
@@ -32,13 +32,13 @@
|
|
{ [`${prefixCls}-imgs-nosition`]: nosition }
|
|
{ [`${prefixCls}-imgs-nosition`]: nosition }
|
|
]"
|
|
]"
|
|
:style="styles"
|
|
:style="styles"
|
|
|
|
+ v-move-ele.prevent.stop="{ mouseMove, mouseWheel }"
|
|
v-if="modalIsShow"
|
|
v-if="modalIsShow"
|
|
- @click="cancel"
|
|
|
|
>
|
|
>
|
|
<img
|
|
<img
|
|
- :key="curImage.id"
|
|
|
|
|
|
+ :key="curImage.url"
|
|
:src="curImage.url"
|
|
:src="curImage.url"
|
|
- :alt="curImage.studentName"
|
|
|
|
|
|
+ :alt="curImage.name"
|
|
ref="PreviewImgDetail"
|
|
ref="PreviewImgDetail"
|
|
@load="reizeImage"
|
|
@load="reizeImage"
|
|
/>
|
|
/>
|
|
@@ -55,6 +55,27 @@
|
|
|
|
|
|
<div :class="[`${prefixCls}-footer`]">
|
|
<div :class="[`${prefixCls}-footer`]">
|
|
<ul>
|
|
<ul>
|
|
|
|
+ <li title="合适大小" @click="toOrigin">
|
|
|
|
+ <Icon type="md-expand" />
|
|
|
|
+ </li>
|
|
|
|
+ <li
|
|
|
|
+ title="放大"
|
|
|
|
+ @click="toMagnify"
|
|
|
|
+ :class="{
|
|
|
|
+ 'li-disabled': transform.scale === maxScale
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ <Icon type="md-add-circle" />
|
|
|
|
+ </li>
|
|
|
|
+ <li
|
|
|
|
+ title="缩小"
|
|
|
|
+ @click="toShrink"
|
|
|
|
+ :class="{
|
|
|
|
+ 'li-disabled': transform.scale === minScale
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ <Icon type="md-remove-circle" />
|
|
|
|
+ </li>
|
|
<li title="旋转" @click.stop="toRotate">
|
|
<li title="旋转" @click.stop="toRotate">
|
|
<Icon type="ios-refresh-circle" />
|
|
<Icon type="ios-refresh-circle" />
|
|
</li>
|
|
</li>
|
|
@@ -64,6 +85,7 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import MoveEle from "./move-ele";
|
|
const prefixCls = "cc-image-preview";
|
|
const prefixCls = "cc-image-preview";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
@@ -76,12 +98,15 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ directives: { MoveEle },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
prefixCls,
|
|
prefixCls,
|
|
modalIsShow: false,
|
|
modalIsShow: false,
|
|
styles: { width: "", height: "", top: "", left: "", transform: "" },
|
|
styles: { width: "", height: "", top: "", left: "", transform: "" },
|
|
initWidth: 500,
|
|
initWidth: 500,
|
|
|
|
+ minScale: 0.2,
|
|
|
|
+ maxScale: 3,
|
|
transform: {
|
|
transform: {
|
|
scale: 1,
|
|
scale: 1,
|
|
rotate: 0
|
|
rotate: 0
|
|
@@ -91,7 +116,23 @@ export default {
|
|
nosition: false
|
|
nosition: false
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
+ mounted() {
|
|
|
|
+ this.registWheelHandle();
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
|
|
+ visibleChange(visible) {
|
|
|
|
+ if (!visible) return;
|
|
|
|
+ // this.loading = true;
|
|
|
|
+ // this.$nextTick(() => {
|
|
|
|
+ // this.registfileLoad();
|
|
|
|
+ // });
|
|
|
|
+ },
|
|
|
|
+ // registfileLoad() {
|
|
|
|
+ // const imgDom = this.$refs.PreviewImgDetail;
|
|
|
|
+ // imgDom.onload = () => {
|
|
|
|
+ // this.reizeImage(imgDom);
|
|
|
|
+ // };
|
|
|
|
+ // },
|
|
reizeImage() {
|
|
reizeImage() {
|
|
if (this.loadingSetT) clearTimeout(this.loadingSetT);
|
|
if (this.loadingSetT) clearTimeout(this.loadingSetT);
|
|
|
|
|
|
@@ -178,10 +219,42 @@ export default {
|
|
// this.initData();
|
|
// this.initData();
|
|
},
|
|
},
|
|
// dome-move
|
|
// dome-move
|
|
|
|
+ registWheelHandle() {
|
|
|
|
+ this.$refs.ReviewBody.addEventListener("wheel", e => {
|
|
|
|
+ e.preventDefault();
|
|
|
|
+ this.mouseWheel(e.wheelDeltaY);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ mouseMove({ left, top }) {
|
|
|
|
+ this.styles.left = left + "px";
|
|
|
|
+ this.styles.top = top + "px";
|
|
|
|
+ },
|
|
|
|
+ mouseWheel(delta) {
|
|
|
|
+ if (delta < 0) {
|
|
|
|
+ this.toMagnify();
|
|
|
|
+ } else {
|
|
|
|
+ this.toShrink();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
setStyleTransform() {
|
|
setStyleTransform() {
|
|
const { scale, rotate } = this.transform;
|
|
const { scale, rotate } = this.transform;
|
|
this.styles.transform = `scale(${scale}, ${scale}) rotate(${rotate}deg)`;
|
|
this.styles.transform = `scale(${scale}, ${scale}) rotate(${rotate}deg)`;
|
|
},
|
|
},
|
|
|
|
+ toOrigin() {
|
|
|
|
+ this.transform.scale = 1;
|
|
|
|
+ this.setStyleTransform();
|
|
|
|
+ this.reizeImage();
|
|
|
|
+ },
|
|
|
|
+ toMagnify() {
|
|
|
|
+ const scale = (this.transform.scale * 1.2).toFixed(2);
|
|
|
|
+ this.transform.scale = scale >= this.maxScale ? this.maxScale : scale;
|
|
|
|
+ this.setStyleTransform();
|
|
|
|
+ },
|
|
|
|
+ toShrink() {
|
|
|
|
+ const scale = (this.transform.scale * 0.75).toFixed(2);
|
|
|
|
+ this.transform.scale = scale <= this.minScale ? this.minScale : scale;
|
|
|
|
+ this.setStyleTransform();
|
|
|
|
+ },
|
|
toRotate() {
|
|
toRotate() {
|
|
this.transform.rotate = this.transform.rotate + 90;
|
|
this.transform.rotate = this.transform.rotate + 90;
|
|
this.setStyleTransform();
|
|
this.setStyleTransform();
|