<!-- 张数选择器 -->
|
<template>
|
<div class="slider-index">
|
<div class="amount-slider">
|
<div class="amount-slider-clickable">
|
<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' }" @drag-end="onDragEnd">
|
<template v-slot:step="{ active }">
|
<div :class="['custom-step', { active }]"></div>
|
</template>
|
</vue-slider>
|
</div>
|
<div class="poecs">
|
<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>
|
</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, //可开或者可平的总数
|
},
|
propsAmount: {
|
type: Number,
|
default: 0, //用户输入的张数(父组件传过来的)
|
}
|
},
|
data() {
|
return {
|
amount: undefined, //用户输入的张数
|
sliderAmount: "", //滑块的数量
|
marks: (val) => val % 25 === 0,
|
// marks: { 25: '25%', 50: '50%', 75: '75%', 100: '100%' }, //去掉0%的标记
|
};
|
},
|
computed: {
|
...mapGetters(["existToken"]),
|
},
|
watch: {
|
propsAmount: {
|
handler(newVal) {
|
this.amount = newVal;
|
this.sliderAmount = ((newVal / this.maxAmount) * 100).toFixed(2);
|
},
|
},
|
},
|
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);
|
},
|
// 清除输入框
|
cleanAmount() {
|
this.amount = undefined;
|
},
|
//滑块事件
|
sliderAmountChange(val) {
|
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 = this.sliderAmount / 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;
|
}
|
}
|
|
.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>
|
