From e88c67ddf91ce593785f565912837c9a3ffe3930 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Tue, 12 Aug 2025 15:17:50 +0800
Subject: [PATCH] 1
---
src/components/Transform/perpetual-open/amountSlider.vue | 48 ++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 44 insertions(+), 4 deletions(-)
diff --git a/src/components/Transform/perpetual-open/amountSlider.vue b/src/components/Transform/perpetual-open/amountSlider.vue
index 0fc8d48..a6d9526 100644
--- a/src/components/Transform/perpetual-open/amountSlider.vue
+++ b/src/components/Transform/perpetual-open/amountSlider.vue
@@ -6,15 +6,16 @@
<vue-slider @change="sliderAmountChange" class="mainBox" :marks="marks" v-model="sliderAmount"
:hide-label="true" width="92%" tooltip="hover" :tooltip-formatter="'{value}%'"
:railStyle="{ background: '#404040', height: '2px' }"
- :processStyle="{ background: '#266BFF', height: '2px' }">
+ :processStyle="{ background: '#266BFF', height: '2px' }" @drag-end="onDragEnd">
<template v-slot:step="{ active }">
<div :class="['custom-step', { active }]"></div>
</template>
</vue-slider>
</div>
<div class="poecs">
- <span>0%</span>
+ <span></span>
<span class="lins">25%</span>
+ <!-- <span >25%</span> -->
<span class="lins">50%</span>
<span class="lins">75%</span>
<span class="lins">100%</span>
@@ -46,6 +47,7 @@
amount: undefined, //用户输入的张数
sliderAmount: "", //滑块的数量
marks: (val) => val % 25 === 0,
+ // marks: { 25: '25%', 50: '50%', 75: '75%', 100: '100%' }, //去掉0%的标记
};
},
computed: {
@@ -60,6 +62,27 @@
},
},
methods: {
+ // 事件处理：当拖动结束时，判断滑块值并调整为最近的档位
+ onDragEnd() {
+ const closestMark = this.getClosestMark(this.sliderAmount);
+ this.sliderAmount = closestMark;
+ },
+ // 获取离当前值最近的档位
+ getClosestMark(value) {
+ const marksArray = [0, 25, 50, 75, 100];
+ let closest = marksArray[0];
+ let minDiff = Math.abs(value - closest);
+
+ marksArray.forEach((mark) => {
+ const diff = Math.abs(value - mark);
+ if (diff < minDiff) {
+ minDiff = diff;
+ closest = mark;
+ }
+ });
+
+ return closest;
+ },
//输入框事件
inputChange(val) {
this.$emit("getAmount", val);
@@ -70,13 +93,30 @@
},
//滑块事件
sliderAmountChange(val) {
- // console.log("滑块的值", val, this.maxAmount);
+ const closestMark = this.getClosestMark(val);
+ this.sliderAmount = closestMark;
+ // const marksArray = [0, 25, 50, 75, 100];
+ // let closest = marksArray[0];
+ // let minDiff = Math.abs(val - closest);
+
+ // marksArray.forEach((mark) => {
+ // const diff = Math.abs(val - mark);
+ // if (diff < minDiff) {
+ // minDiff = diff;
+ // closest = mark;
+ // }
+ // });
+ // console.log('closest',closest);
+ // // return closest;
+ // val = closest;
+ // console.log("滑块的值", val, this.maxAmount);
+
let data;
if (this.maxAmount) {
if (val == 0) {
this.amount = undefined;
} else {
- const rate = val / 100; //如0.25
+ const rate = this.sliderAmount / 100; //如0.25
data = this.maxAmount * rate;
this.amount = parseInt(data);
}
--
Gitblit v1.9.3