1

jhzh

2025-08-12 e88c67ddf91ce593785f565912837c9a3ffe3930

 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);
                }