|
1 | 1 | <template>
|
2 | 2 | <div class="vue-image-crop-upload" v-show="value">
|
3 |
| - <div class="vicp-wrap"> |
4 |
| - <div class="vicp-close" @click="off"> |
5 |
| - <i class="vicp-icon4"></i> |
6 |
| - </div> |
| 3 | + <div class="vicp-wrap"> |
| 4 | + <div class="vicp-close" @click="off"> |
| 5 | + <i class="vicp-icon4"></i> |
| 6 | + </div> |
7 | 7 |
|
8 |
| - <div class="vicp-step1" v-show="step == 1"> |
9 |
| - <div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange"> |
10 |
| - <i class="vicp-icon1" v-show="loading != 1"> |
11 |
| - <i class="vicp-icon1-arrow"></i> |
12 |
| - <i class="vicp-icon1-body"></i> |
13 |
| - <i class="vicp-icon1-bottom"></i> |
14 |
| - </i> |
15 |
| - <span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span> |
16 |
| - <span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span> |
17 |
| - <input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput"> |
18 |
| - </div> |
19 |
| - <div class="vicp-error" v-show="hasError"> |
20 |
| - <i class="vicp-icon2"></i> {{ errorMsg }} |
21 |
| - </div> |
22 |
| - <div class="vicp-operate"> |
23 |
| - <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a> |
24 |
| - </div> |
25 |
| - </div> |
| 8 | + <div class="vicp-step1" v-show="step == 1"> |
| 9 | + <div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange"> |
| 10 | + <i class="vicp-icon1" v-show="loading != 1"> |
| 11 | + <i class="vicp-icon1-arrow"></i> |
| 12 | + <i class="vicp-icon1-body"></i> |
| 13 | + <i class="vicp-icon1-bottom"></i> |
| 14 | + </i> |
| 15 | + <span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span> |
| 16 | + <span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span> |
| 17 | + <input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput"> |
| 18 | + </div> |
| 19 | + <div class="vicp-error" v-show="hasError"> |
| 20 | + <i class="vicp-icon2"></i> {{ errorMsg }} |
| 21 | + </div> |
| 22 | + <div class="vicp-operate"> |
| 23 | + <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a> |
| 24 | + </div> |
| 25 | + </div> |
26 | 26 |
|
27 |
| - <div class="vicp-step2" v-if="step == 2"> |
28 |
| - <div class="vicp-crop"> |
29 |
| - <div class="vicp-crop-left" v-show="true"> |
30 |
| - <div class="vicp-img-container"> |
31 |
| - <img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false" |
32 |
| - @drag="preventDefault" |
33 |
| - @dragstart="preventDefault" |
34 |
| - @dragend="preventDefault" |
35 |
| - @dragleave="preventDefault" |
36 |
| - @dragover="preventDefault" |
37 |
| - @dragenter="preventDefault" |
38 |
| - @drop="preventDefault" |
39 |
| - @touchstart="imgStartMove" |
40 |
| - @touchmove="imgMove" |
41 |
| - @touchend="createImg" |
42 |
| - @touchcancel="createImg" |
43 |
| - @mousedown="imgStartMove" |
44 |
| - @mousemove="imgMove" |
45 |
| - @mouseup="createImg" |
46 |
| - @mouseout="createImg" |
47 |
| - ref="img"> |
48 |
| - <div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div> |
49 |
| - <div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div> |
50 |
| - </div> |
| 27 | + <div class="vicp-step2" v-if="step == 2"> |
| 28 | + <div class="vicp-crop"> |
| 29 | + <div class="vicp-crop-left" v-show="true"> |
| 30 | + <div class="vicp-img-container"> |
| 31 | + <img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false" |
| 32 | + @drag="preventDefault" |
| 33 | + @dragstart="preventDefault" |
| 34 | + @dragend="preventDefault" |
| 35 | + @dragleave="preventDefault" |
| 36 | + @dragover="preventDefault" |
| 37 | + @dragenter="preventDefault" |
| 38 | + @drop="preventDefault" |
| 39 | + @touchstart="imgStartMove" |
| 40 | + @touchmove="imgMove" |
| 41 | + @touchend="createImg" |
| 42 | + @touchcancel="createImg" |
| 43 | + @mousedown="imgStartMove" |
| 44 | + @mousemove="imgMove" |
| 45 | + @mouseup="createImg" |
| 46 | + @mouseout="createImg" |
| 47 | + ref="img"> |
| 48 | + <div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div> |
| 49 | + <div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div> |
| 50 | + </div> |
51 | 51 |
|
52 |
| - <div class="vicp-range"> |
53 |
| - <input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange"> |
54 |
| - <i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i> |
55 |
| - <i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i> |
56 |
| - </div> |
| 52 | + <div class="vicp-range"> |
| 53 | + <input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange"> |
| 54 | + <i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i> |
| 55 | + <i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i> |
| 56 | + </div> |
57 | 57 |
|
58 |
| - <div class="vicp-rotate" v-if="!noRotate"> |
| 58 | + <div class="vicp-rotate" v-if="!noRotate"> |
59 | 59 | <i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
|
60 | 60 | <i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
|
61 | 61 | </div>
|
62 |
| - </div> |
63 |
| - <div class="vicp-crop-right" v-show="true"> |
64 |
| - <div class="vicp-preview"> |
65 |
| - <div class="vicp-preview-item" v-if="!noSquare"> |
66 |
| - <img :src="createImgUrl" :style="previewStyle"> |
67 |
| - <span>{{ lang.preview }}</span> |
68 |
| - </div> |
69 |
| - <div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle"> |
70 |
| - <img :src="createImgUrl" :style="previewStyle"> |
71 |
| - <span>{{ lang.preview }}</span> |
72 |
| - </div> |
73 |
| - </div> |
74 |
| - </div> |
75 |
| - </div> |
76 |
| - <div class="vicp-operate"> |
77 |
| - <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a> |
78 |
| - <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a> |
79 |
| - </div> |
80 |
| - </div> |
| 62 | + </div> |
| 63 | + <div class="vicp-crop-right" v-show="true"> |
| 64 | + <div class="vicp-preview"> |
| 65 | + <div class="vicp-preview-item" v-if="!noSquare"> |
| 66 | + <img :src="createImgUrl" :style="previewStyle"> |
| 67 | + <span>{{ lang.preview }}</span> |
| 68 | + </div> |
| 69 | + <div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle"> |
| 70 | + <img :src="createImgUrl" :style="previewStyle"> |
| 71 | + <span>{{ lang.preview }}</span> |
| 72 | + </div> |
| 73 | + </div> |
| 74 | + </div> |
| 75 | + </div> |
| 76 | + <div class="vicp-operate"> |
| 77 | + <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a> |
| 78 | + <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a> |
| 79 | + </div> |
| 80 | + </div> |
81 | 81 |
|
82 |
| - <div class="vicp-step3" v-if="step == 3"> |
83 |
| - <div class="vicp-upload"> |
84 |
| - <span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span> |
85 |
| - <div class="vicp-progress-wrap"> |
86 |
| - <span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span> |
87 |
| - </div> |
88 |
| - <div class="vicp-error" v-show="hasError"> |
89 |
| - <i class="vicp-icon2"></i> {{ errorMsg }} |
90 |
| - </div> |
91 |
| - <div class="vicp-success" v-show="loading === 2"> |
92 |
| - <i class="vicp-icon3"></i> {{ lang.success }} |
93 |
| - </div> |
94 |
| - </div> |
95 |
| - <div class="vicp-operate"> |
96 |
| - <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a> |
97 |
| - <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a> |
98 |
| - </div> |
99 |
| - </div> |
100 |
| - <canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas> |
101 |
| - </div> |
| 82 | + <div class="vicp-step3" v-if="step == 3"> |
| 83 | + <div class="vicp-upload"> |
| 84 | + <span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span> |
| 85 | + <div class="vicp-progress-wrap"> |
| 86 | + <span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span> |
| 87 | + </div> |
| 88 | + <div class="vicp-error" v-show="hasError"> |
| 89 | + <i class="vicp-icon2"></i> {{ errorMsg }} |
| 90 | + </div> |
| 91 | + <div class="vicp-success" v-show="loading === 2"> |
| 92 | + <i class="vicp-icon3"></i> {{ lang.success }} |
| 93 | + </div> |
| 94 | + </div> |
| 95 | + <div class="vicp-operate"> |
| 96 | + <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a> |
| 97 | + <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a> |
| 98 | + </div> |
| 99 | + </div> |
| 100 | + <canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas> |
| 101 | + </div> |
102 | 102 | </div>
|
103 | 103 | </template>
|
104 | 104 |
|
@@ -409,7 +409,7 @@ export default {
|
409 | 409 | }, 200)
|
410 | 410 | },
|
411 | 411 | /* 图片选择区域函数绑定
|
412 |
| - ---------------------------------------------------------------*/ |
| 412 | + ---------------------------------------------------------------*/ |
413 | 413 | preventDefault(e) {
|
414 | 414 | e.preventDefault()
|
415 | 415 | return false
|
@@ -589,7 +589,7 @@ export default {
|
589 | 589 | scale.x = rX
|
590 | 590 | scale.y = rY
|
591 | 591 | },
|
592 |
| - // 按钮按下开始向右旋转 |
| 592 | + // 按钮按下开始向右旋转 |
593 | 593 | startRotateRight(e) {
|
594 | 594 | let that = this,
|
595 | 595 | {
|
@@ -737,7 +737,7 @@ export default {
|
737 | 737 | }
|
738 | 738 | }, 300)
|
739 | 739 | },
|
740 |
| - // 生成需求图片 |
| 740 | + // 生成需求图片 |
741 | 741 | createImg(e) {
|
742 | 742 | let that = this,
|
743 | 743 | {
|
@@ -1132,9 +1132,9 @@ export default {
|
1132 | 1132 | appearance: none;
|
1133 | 1133 | cursor: pointer;
|
1134 | 1134 | /* 滑块
|
1135 |
| - ---------------------------------------------------------------*/ |
| 1135 | + ---------------------------------------------------------------*/ |
1136 | 1136 | /* 轨道
|
1137 |
| - ---------------------------------------------------------------*/ } |
| 1137 | + ---------------------------------------------------------------*/ } |
1138 | 1138 | .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
|
1139 | 1139 | outline: none; }
|
1140 | 1140 | .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
|
|
0 commit comments