From dce10d37ad35efe8ed1d39d6e5fcf7e4904381df Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Fri, 12 Jun 2026 13:19:53 +0800
Subject: [PATCH] 1
---
src/components/Transform/perpetual-open/amountSlider.vue | 66 +++++++++++++++++++++++---------
1 files changed, 47 insertions(+), 19 deletions(-)
diff --git a/src/components/Transform/perpetual-open/amountSlider.vue b/src/components/Transform/perpetual-open/amountSlider.vue
index e31936e..f2a4aa8 100644
--- a/src/components/Transform/perpetual-open/amountSlider.vue
+++ b/src/components/Transform/perpetual-open/amountSlider.vue
@@ -3,15 +3,15 @@
<div class="slider-index">
<div class="amount-slider">
<div class="amount-slider-clickable">
- <!-- 本地报错 调试时候注释掉 yyhh-->
- <!-- <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' }">
- <template v-slot:step="{ active }">
- <div :class="['custom-step', { active }]"></div>
- </template>
- </vue-slider> -->
+ <!-- 本地报错 调试时候注释掉 yyhh-->
+ <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' }">
+ <template v-slot:step="{ active }">
+ <div :class="['custom-step', { active }]"></div>
+ </template>
+ </vue-slider>
</div>
<div class="poecs">
<span>0%</span>
@@ -24,8 +24,8 @@
</div>
</template>
<script>
-import { mapGetters } from "vuex";
import VueSlider from "vue-slider-component";
+import "vue-slider-component/theme/default.css";
export default {
name: "amountSlider",
components: {
@@ -34,20 +34,50 @@
props: {
maxAmount: {
type: Number,
- default: 0, //可开或者可平的总数
+ default: 0,
+ },
+ /** 与父级数量输入框同步，限价改价后 max 变化时滑块百分比随之更新 */
+ amountValue: {
+ type: [String, Number],
+ default: "",
},
},
data() {
return {
- amount: undefined, //用户输入的张数
- sliderAmount:0 , //滑块的数量
+ amount: undefined,
+ sliderAmount: 0,
marks: (val) => val % 25 === 0,
};
},
- computed: {
- ...mapGetters(["existToken"]),
+ watch: {
+ maxAmount() {
+ this.$nextTick(() => this.syncSliderFromAmount())
+ },
+ amountValue() {
+ this.$nextTick(() => this.syncSliderFromAmount())
+ },
+ },
+ mounted() {
+ this.syncSliderFromAmount()
},
methods: {
+ syncSliderFromAmount() {
+ const mx = Number(this.maxAmount)
+ const amt = parseFloat(this.amountValue)
+ if (!isFinite(mx) || mx <= 0) {
+ this.sliderAmount = 0
+ return
+ }
+ if (!isFinite(amt) || amt <= 0) {
+ this.sliderAmount = 0
+ return
+ }
+ const pct = Math.min(100, Math.max(0, (amt / mx) * 100))
+ const next = Math.round(pct * 100) / 100
+ if (Number(this.sliderAmount) !== next) {
+ this.sliderAmount = next
+ }
+ },
//输入框事件
inputChange(val) {
this.$emit("getAmount", val);
@@ -58,7 +88,6 @@
},
//滑块事件
sliderAmountChange(val) {
- console.log("滑块的值", val, this.maxAmount);
let data;
if (this.maxAmount) {
if (val == 0) {
@@ -66,7 +95,7 @@
} else {
const rate = val / 100; //如0.25
data = this.maxAmount * rate;
- this.amount = parseInt(data);
+ this.amount = Math.floor(data * 10000) / 10000;
}
this.$emit("getAmount", this.amount);
}
@@ -123,5 +152,4 @@
width: 22%;
text-align: right;
}
-</style>
-
\ No newline at end of file
+</style>
\ No newline at end of file
--
Gitblit v1.9.3