1

李凌

2 days ago dce10d37ad35efe8ed1d39d6e5fcf7e4904381df

 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>
  
</style>