1

李

7 days ago 4f9044ae2a9f2db03bbb916bc5f6dfd12916361d

 src/components/Transform/perpetual-open/amountSlider.vue

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