style

lxf

2025-06-05 8f9e4fbc244af9e91f69f8b2851f4068abe7e600

 src/components/constract/PerpetualContract/orderCom/amountSlider.vue

@@ -23,6 +23,7 @@
        v-model="sliderAmount"
        :format-tooltip="(v) => `${v}%`"
        :marks="marks"
        :step="25"
      >
      </el-slider>
    </div>
@@ -90,15 +91,32 @@
        0: "0",
        25: "25%",
        50: "50%",
        75: "70%",
        75: "75%",
        100: "100%",
      },
      allowedSteps: [0, 25, 50, 75, 100],
    };
  },
  computed: {
    ...mapState(useUserStore, ["existToken"]),
  },
  methods: {
    onSliderInput(val) {
      // 只允许滑到指定点
      const allowed = this.allowedSteps;
      let closest = allowed[0];
      let minDiff = Math.abs(val - allowed[0]);
      for (let i = 1; i < allowed.length; i++) {
        const diff = Math.abs(val - allowed[i]);
        if (diff < minDiff) {
          minDiff = diff;
          closest = allowed[i];
        }
      }
      if (this.sliderAmount !== closest) {
        this.sliderAmount = closest;
      }
    },
    //输入框事件
    inputChange(val) {
      this.$emit("getAmount", val);
@@ -127,7 +145,7 @@
      }
    },
    emptyValue() {
      this.sliderAmount = undefined;
      this.sliderAmount = 0;
    },
  },
};