1 | <template>
|
2 | <div class="imgPoup flex" :style="'background:'+bgColor" v-show="imgBoxShow" @mousewheel.stop.prevent="imgZoom">
|
3 | <transition name="fadeOacityImg">
|
4 | <div class="imgBox" v-show="imgBoxShow" ref="imgBox">
|
5 | <img :src="imgSrc" ref="image" @mousedown.left.stop="drag" @mousemove.left.stop.prevent="move" @mouseup.left.stop="up">
|
6 | </div>
|
7 | </transition>
|
8 | </div>
|
9 | </template>
|
10 | <script>
|
11 | export default {
|
12 | props: {
|
13 | imgSrc: {
|
14 | type: String,
|
15 | default: ""
|
16 | },
|
17 | bgColor: {
|
18 | type: String,
|
19 | default: "rgba(0, 0, 0, 0.7)"
|
20 | }
|
21 | },
|
22 | watch: {
|
23 | imgSrc(url) {
|
24 | if (url) {
|
25 | const { image } = this.$refs;
|
26 | image.onload = () => {
|
27 | this.imgOption.width = image.width;
|
28 | this.imgOption.height = image.height;
|
29 | };
|
30 | this.imgBoxShow = true;
|
31 | }
|
32 | }
|
33 | },
|
34 | data() {
|
35 | return {
|
36 | imgBoxShow: false,
|
37 | imgOption: {
|
38 | width: "",
|
39 | height: "",
|
40 | left: 0,
|
41 | top: 0
|
42 | },
|
43 | moveStatus: false,
|
44 | clickStatus: 0,
|
45 | mDown: {
|
46 | left: "",
|
47 | top: "",
|
48 | pageX: "",
|
49 | pageY: "",
|
50 | ofLeft: 0,
|
51 | ofTop: 0
|
52 | }
|
53 | };
|
54 | },
|
55 | mounted() {},
|
56 | methods: {
|
57 | drag(e) {
|
58 | this.moveStatus = true;
|
59 | this.moveCount = 0;
|
60 | this.mDown.left = this.imgOption.left;
|
61 | this.mDown.top = this.imgOption.top;
|
62 | this.mDown.pageX = e.pageX;
|
63 | this.mDown.pageY = e.pageY;
|
64 | },
|
65 | move(e) {
|
66 | if (!this.moveStatus) return;
|
67 | this.moveCount++;
|
68 | this.imgOption.left = this.mDown.left + e.pageX - this.mDown.pageX;
|
69 | this.imgOption.top = this.mDown.top + e.pageY - this.mDown.pageY;
|
70 | this.setImgBox();
|
71 | },
|
72 | up() {
|
73 | this.moveStatus = false;
|
74 | this.closeImg();
|
75 | },
|
76 | resetImg() {
|
77 | let { image, imgBox } = this.$refs;
|
78 | this.imgOption.left = 0;
|
79 | this.imgOption.top = 0;
|
80 | image.style.width = "";
|
81 | image.style.height = "";
|
82 | imgBox.style.transform = `translateX(0) translateY(0)`;
|
83 | },
|
84 | setImgBox() {
|
85 | const { imgBox } = this.$refs;
|
86 | this.mDown.ofLeft = imgBox.offsetLeft + this.imgOption.left;
|
87 | this.mDown.ofTop = imgBox.offsetTop + this.imgOption.top;
|
88 | imgBox.style.transform = `translateX(${this.imgOption.left}px) translateY(${this.imgOption.top}px)`;
|
89 | },
|
90 |
|
91 | imgZoom(e) {
|
92 | const { wheelDelta } = e;
|
93 | const { image } = this.$refs;
|
94 | let width, height;
|
95 | const zoomW = this.imgOption.width / 10;
|
96 | const zoomH = this.imgOption.height / 10;
|
97 |
|
98 | if (wheelDelta > 0) {
|
99 | width = image.width + zoomW;
|
100 | height = image.height + zoomH;
|
101 | } else {
|
102 | width = image.width - zoomW;
|
103 | height = image.height - zoomH;
|
104 | }
|
105 | image.style.width = `${width || zoomW}px`;
|
106 | image.style.height = `${height || zoomH}px`;
|
107 |
|
108 | this.setImgBox();
|
109 | },
|
110 | closeImg() {
|
111 | if (this.moveCount > 1) return;
|
112 | this.imgBoxShow = false;
|
113 | this.resetImg();
|
114 | this.$emit("update:imgSrc", "");
|
115 | }
|
116 | }
|
117 | };
|
118 | </script>
|
119 | <style lang='scss' scoped>
|
120 | .fadeOacityImg-enter-active {
|
121 | opacity: 1;
|
122 | transition: all 0.5s;
|
123 | transform: scale(1, 1);
|
124 | }
|
125 | .fadeOacityImg-enter {
|
126 | opacity: 0;
|
127 | transform: scale(0.1, 0.1);
|
128 | }
|
129 | .imgPoup {
|
130 | position: fixed;
|
131 | top: 0;
|
132 | right: 0;
|
133 | bottom: 0;
|
134 | left: 0;
|
135 | justify-content: center;
|
136 | align-items: center;
|
137 | z-index: 300;
|
138 | .imgBox {
|
139 | position: relative;
|
140 | img {
|
141 | cursor: all-scroll;
|
142 | max-width: none;
|
143 | }
|
144 | }
|
145 | }
|
146 | </style> |
\ | No newline at end of file |