<!-- 张数选择器 -->
|
<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 VueSlider from "vue-slider-component";
|
import "vue-slider-component/theme/default.css";
|
export default {
|
name: "amountSlider",
|
components: {
|
VueSlider,
|
},
|
props: {
|
maxAmount: {
|
type: Number,
|
default: 0,
|
},
|
/** 与父级数量输入框同步，限价改价后 max 变化时滑块百分比随之更新 */
|
amountValue: {
|
type: [String, Number],
|
default: "",
|
},
|
},
|
data() {
|
return {
|
amount: undefined,
|
sliderAmount: 0,
|
marks: (val) => val % 25 === 0,
|
};
|
},
|
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);
|
},
|
// 清除输入框
|
cleanAmount() {
|
this.amount = undefined;
|
},
|
//滑块事件
|
sliderAmountChange(val) {
|
let data;
|
if (this.maxAmount) {
|
if (val == 0) {
|
this.amount = undefined;
|
} else {
|
const rate = val / 100; //如0.25
|
data = this.maxAmount * rate;
|
this.amount = Math.floor(data * 10000) / 10000;
|
}
|
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>
|
