@fy-/fws-vue 2.0.83 → 2.0.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -98,6 +98,7 @@ const modelValueSrc = computed(() => {
|
|
|
98
98
|
const start = reactive({ x: 0, y: 0 });
|
|
99
99
|
|
|
100
100
|
const touchStart = (event: TouchEvent) => {
|
|
101
|
+
event.preventDefault();
|
|
101
102
|
const touch = event.touches[0];
|
|
102
103
|
start.x = touch.screenX;
|
|
103
104
|
start.y = touch.screenY;
|
|
@@ -110,7 +111,8 @@ const touchEnd = (event: TouchEvent) => {
|
|
|
110
111
|
const diffX = start.x - end.x;
|
|
111
112
|
const diffY = start.y - end.y;
|
|
112
113
|
|
|
113
|
-
|
|
114
|
+
// Add a threshold to prevent accidental swipes
|
|
115
|
+
if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
|
|
114
116
|
if (diffX > 0) {
|
|
115
117
|
goNextImage();
|
|
116
118
|
} else {
|
|
@@ -118,6 +120,7 @@ const touchEnd = (event: TouchEvent) => {
|
|
|
118
120
|
}
|
|
119
121
|
}
|
|
120
122
|
};
|
|
123
|
+
|
|
121
124
|
const getBorderColor = (i: any) => {
|
|
122
125
|
if (props.borderColor !== undefined) {
|
|
123
126
|
return props.borderColor(i);
|
|
@@ -215,6 +218,8 @@ onUnmounted(() => {
|
|
|
215
218
|
</div>
|
|
216
219
|
<div
|
|
217
220
|
class="flex-1 flex flex-col items-center justify-center max-w-full lg:max-w-[calc(100vw - 256px)]"
|
|
221
|
+
@touchstart="touchStart"
|
|
222
|
+
@touchend="touchEnd"
|
|
218
223
|
>
|
|
219
224
|
<div
|
|
220
225
|
class="flex-1 w-full max-w-full flex items-center justify-center"
|
|
@@ -227,8 +232,6 @@ onUnmounted(() => {
|
|
|
227
232
|
:is="videoComponent"
|
|
228
233
|
:src="isVideo(images[modelValue])"
|
|
229
234
|
class="shadow max-w-full h-auto object-contain max-h-[85vh]"
|
|
230
|
-
@touchstart="touchStart"
|
|
231
|
-
@touchend="touchEnd"
|
|
232
235
|
/>
|
|
233
236
|
</ClientOnly>
|
|
234
237
|
</template>
|
|
@@ -237,8 +240,6 @@ onUnmounted(() => {
|
|
|
237
240
|
class="shadow max-w-full h-auto object-contain max-h-[85vh]"
|
|
238
241
|
:src="modelValueSrc"
|
|
239
242
|
v-if="modelValueSrc && imageComponent == 'img'"
|
|
240
|
-
@touchstart="touchStart"
|
|
241
|
-
@touchend="touchEnd"
|
|
242
243
|
/>
|
|
243
244
|
<component
|
|
244
245
|
v-else-if="modelValueSrc && imageComponent"
|
|
@@ -246,8 +247,6 @@ onUnmounted(() => {
|
|
|
246
247
|
:image="modelValueSrc.image"
|
|
247
248
|
:variant="modelValueSrc.variant"
|
|
248
249
|
:alt="modelValueSrc.alt"
|
|
249
|
-
@touchstart="touchStart"
|
|
250
|
-
@touchend="touchEnd"
|
|
251
250
|
class="shadow max-w-full h-auto object-contain max-h-[85vh]"
|
|
252
251
|
/>
|
|
253
252
|
</template>
|