From b56fcbe8d410c18b3a6ff7e4eb0e24815bbb5e09 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期五, 19 九月 2025 13:41:59 +0800
Subject: [PATCH] 移动端释放滑块
---
manager/src/components/verify/index.vue | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 50 insertions(+), 7 deletions(-)
diff --git a/manager/src/components/verify/index.vue b/manager/src/components/verify/index.vue
index 2cbb882..73ece56 100644
--- a/manager/src/components/verify/index.vue
+++ b/manager/src/components/verify/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
+ <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @touchmove="touchMove" @touchend="touchEnd" @click.stop>
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
<img :src="data.backImage" style="width:100%;height:100%" alt="">
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
@@ -7,7 +7,7 @@
</div>
<div class="handle" :style="{width:data.originalWidth+'px'}">
<span class="bgcolor" :style="{width:distance + 'px',background:bgColor}"></span>
- <span class="swiper" :style="{left:distance + 'px'}" @mousedown="mouseDown">
+ <span class="swiper" :style="{left:distance + 'px'}" @mousedown="mouseDown" @touchstart="touchStart">
<Icon type="md-arrow-round-forward" />
</span>
<span class="text">{{verifyText}}</span>
@@ -49,6 +49,13 @@
this.downX = e.clientX;
this.flag = true;
},
+ // 瑙︽懜寮�濮嬩簨浠讹紝寮�濮嬫嫋鍔ㄦ粦鍧�
+ touchStart (e) {
+ // 闃绘榛樿婊氬姩琛屼负
+ e.preventDefault();
+ this.downX = e.touches[0].clientX;
+ this.flag = true;
+ },
// 榧犳爣绉诲姩浜嬩欢锛岃绠楄窛绂�
mouseMove (e) {
if (this.flag) {
@@ -63,20 +70,54 @@
}
}
},
+ // 瑙︽懜绉诲姩浜嬩欢锛岃绠楄窛绂�
+ touchMove (e) {
+ // 闃绘榛樿婊氬姩琛屼负
+ e.preventDefault();
+ if (this.flag) {
+ let offset = e.touches[0].clientX - this.downX;
+
+ if (offset > this.data.originalWidth - 43) {
+ this.distance = this.data.originalWidth - 43;
+ } else if (offset < 0) {
+ this.distance = 0;
+ } else {
+ this.distance = offset;
+ }
+ }
+ },
// 榧犳爣鎶捣浜嬩欢锛岄獙璇佹槸鍚︽纭�
mouseUp () {
if (!this.flag) return false;
this.flag = false;
+ this.verifySlide();
+ },
+ // 瑙︽懜缁撴潫浜嬩欢锛岄獙璇佹槸鍚︽纭�
+ touchEnd () {
+ if (!this.flag) return false;
+ this.flag = false;
+ this.verifySlide();
+ },
+ // 楠岃瘉婊戝潡浣嶇疆
+ verifySlide() {
+ // 鍥涜垗浜斿叆纭繚浣嶇疆鏄暣鏁帮紝鎻愰珮楠岃瘉鍑嗙‘鎬�
+ let xPos = Math.round(this.distance);
+
+ // 娣诲姞璋冭瘯淇℃伅
+ console.log('婊戝潡浣嶇疆:', xPos, '瀹瑰櫒瀹藉害:', this.data.originalWidth, '璁惧鍍忕礌姣�:', window.devicePixelRatio);
+
let params = {
verificationEnums: this.type,
- xPos: this.distance
+ xPos: xPos
};
+
postVerifyImg(params).then(res => {
+ console.log('楠岃瘉鍝嶅簲:', res);
if (res.success) {
if (res.result) {
this.bgColor = 'green';
this.verifyText = '瑙ｉ攣鎴愬姛';
- this.$emit('change', { status: true, distance: this.distance });
+ this.$emit('change', { status: true, distance: xPos });
} else {
this.bgColor = 'red';
this.verifyText = '瑙ｉ攣澶辫触';
@@ -84,13 +125,14 @@
setTimeout(() => {
that.init();
}, 1000);
- this.$emit('change', { status: false, distance: this.distance });
+ this.$emit('change', { status: false, distance: xPos });
}
} else {
this.init()
}
-
- }).catch(()=>{
+
+ }).catch((err)=>{
+ console.error('楠岃瘉璇锋眰澶辫触:', err);
this.init()
});
},
@@ -133,6 +175,7 @@
height: 150px;
position: relative;
overflow: hidden;
+ user-select: none;
.slider {
position: absolute;
--
Gitblit v1.8.0