<!-- 张数选择器 -->
|
<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"
|
:interval="25"
|
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>
|
/* 滑块 */
|
.mainBox >>> .vue-slider-dot-tooltip-inner {
|
background: #404040 !important;
|
color: #fafafa !important;
|
}
|
|
.mainBox >>> .vue-slider-dot-tooltip-inner-top::after {
|
display: none;
|
}
|
|
.mainBox >>> .vue-slider-marks {
|
background: #f3f3f3;
|
}
|
|
.mainBox >>> .custom-step {
|
margin-top: -8px;
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
/* 没有选中时候圈圈的颜色 */
|
background: #ffffff;
|
border: 1px solid #dddddd;
|
}
|
.custom-step.active {
|
box-shadow: 0 0 0 3px #1d91ff;
|
background-color: #1d91ff;
|
}
|
|
.poecs {
|
margin-top: 16px;
|
color: #fff;
|
}
|
.poecs span.lins {
|
display: inline-block;
|
width: 22%;
|
text-align: right;
|
}
|
</style>
|
