1

admin

2026-01-06 03043192ddf00f9a36b7454799a9152cd1b50a0b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!-- 张数选择器 -->
<template>
    <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>
                
                
            </div>
            <div class="poecs">
                <span>0%</span>
                <span class="lins">25%</span>
                <span class="lins">50%</span>
                <span class="lins">75%</span>
                <span class="lins">100%</span>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import VueSlider from "vue-slider-component";
 
export default {
    name: "amountSlider",
    components: {
        VueSlider,
    },
    props: {
        maxAmount: {
            type: Number,
            default: 0, //可开或者可平的总数
        },
    },
    data() {
        return {
            amount: undefined, //用户输入的张数
            sliderAmount: "", //滑块的数量
            marks: (val) => val % 25 === 0,
        };
    },
    computed: {
        ...mapGetters(["existToken"]),
    },
    methods: {
        //输入框事件
        inputChange(val) {
            this.$emit("getAmount", val);
        },
        // 清除输入框
        cleanAmount() {
            this.amount = undefined;
        },
        //滑块事件
        sliderAmountChange(val) {
            // console.log("滑块的值", val, this.maxAmount);
            let data;
            if (this.maxAmount) {
                if (val == 0) {
                    this.amount = undefined;
                } else {
                    const rate = val / 100; //如0.25
                    data = this.maxAmount * rate;
                    this.amount = parseInt(data);
                }
                this.$emit("getAmount", this.amount);
            }
        },
        //输入框amount变化
        amountChange(amount) {
            this.sliderAmount = ((amount / this.maxAmount) * 100).toFixed(2);
        },
        emptyValue() {
            this.sliderAmount = "";
        },
    },
};
</script>
<style scoped lang="scss">
/* 滑块 */
.mainBox {
    :deep(.vue-slider-dot-tooltip-inner) {
        background: #404040 !important;
        color: #fafafa !important;
    }
 
    :deep(.vue-slider-dot-tooltip-inner-top::after) {
        display: none;
    }
 
    :deep(.vue-slider-marks) {
        background: $border-grey;
    }
 
    :deep(.custom-step) {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        /* 没有选中时候圈圈的颜色 */
        background: $mainbgWhiteColor;
        border: 1px solid #dddddd;
        margin-top: -6px;
    }
}
 
.custom-step.active {
    box-shadow: 0 0 0 3px $color_main;
    background-color: $color_main;
}
 
.poecs {
    margin-top: 16px;
    color: $text_color;
}
 
.poecs span.lins {
    display: inline-block;
    width: 22%;
    text-align: right;
}
</style>