El marco de trabajo front-end usa vue + element ui, por lo que se selecciona la barra de progreso del componente de interfaz de usuario de elemento
Dirección del componente de elemento
1. Página principal
<template>
<div class="">
<div class="content-hd">
<h2>Two-way progress bar</h2>
</div>
<div class="content-bd">
<BidirectionSliderBar
:base_info="base_info"
v-on:input_value="user_input_value"
v-on:is_true="is_true_value"
></BidirectionSliderBar>
</div>
</div>
</template>
<script>
import BidirectionSliderBar from '../components/bidirectionSliderBar' // Two-way progress bar
export default {
data() {
return {
// configuration
product_config:{
min_single_amount_lower_limit: 0.1, // Lower limit
max_single_amount_upper_limit: 200000,
default_min_single_amount:0.3,
default_max_single_amount:100000,
},
base_info: {},
min_single_amount : '',
max_single_amount : '',
flag_is_true_value: '',
}
},
created() {
this.authority()
},
components: {
BidirectionSliderBar
},
methods: {
authority() {
this.base_info.min_limit = this.product_config.min_single_amount_lower_limit // Lower limit
this.base_info.max_limit = this.product_config.max_single_amount_upper_limit // Limit limit
this.base_info.user_recv_amount_input = [
this.product_config.default_min_single_amount,
this.product_config.default_max_single_amount
]
},
// Receive the data passed by the progress bar sub-component
user_input_value(value){
this.input_value_for_user = value
},
// Receive the data passed by the progress bar sub-component
is_true_value(value){
this.flag_is_true_value = value
}
}
}
</script>
<style scoped>
/deep/ .el-slider__marks-text {
white-space: nowrap ;
}
.slider-bar-input{
width: 150px;
}
</style>
2. Componente de barra de progreso
componentes/bidirectionSliderBar.vue archivo
<template>
<!-- Two-way progress bar -->
<div class="slider-bar-wrp">
<div class="tc">
<el-input
class="slider-bar-input"
v-model="input_value[0]"
@input="on_change_input_value_min"
placeholder="Please enter content"
></el-input>
<span class="gapl">yuan</span>
<span > - </span>
<el-input
class="slider-bar-input"
v-model="input_value[1]"
@input="on_change_input_value_max"
placeholder="Please enter content"
></el-input>
<span class="gapl">yuan</span>
<div class="el-form-item__error">{{ err_msg }}</div>
</div>
<el-slider
v-if="isShow"
range
:step="move_step"
:min="marks_min"
:max="marks_max"
:marks="marks"
@change="on_input_user_recv_amount"
:format-tooltip="formatTooltip"
></el-slider>
</div>
</template>
<script>
import publichFun from "../utils/fun"
export default {
props:{
base_info: {}
},
data() {
return {
isShow: true,
user_recv_amount: [], // input box / slider data
err_msg: '',
input_value: [],
marks_min: 0.3,
marks_max: 5000,
move_step: 1, // Slider step size
marks: {},// Slider subscript
flag_user_recv_amount_month_min: true,
flag_user_recv_amount_month_max: true,
isShow: true
}
},
created(){
this.marks_min = Number(this.base_info.min_limit)
this.marks_max = Number(this.base_info.max_limit)
let min = Number(this.base_info.min_limit)
let max = Number(this.base_info.max_limit)
this.move_step = parseInt((max - min) / 10)
this.marks[min] = publichFun._addMilliFormat(parseFloat(this.base_info.min_limit).toFixed(2))
this.marks[max] = publichFun._addMilliFormat(parseFloat(this.base_info.max_limit).toFixed(2))
this.input_value = this.base_info.user_recv_amount_input
this.user_recv_amount[0] = Number(this.input_value[0])
this.user_recv_amount[1] = Number(this.input_value[1])
},
methods: {
formatTooltip(val) {
return publichFun._addMilliFormat(parseFloat(val).toFixed(2))
},
/**
* @function input value
*/
on_change_input_value_min(val) {
let split = val.split('.')
if (
publichFun._compareFloat(this.base_info.min_limit,val) > 0 || isNaN(val)
) {
this.err_msg = 'Not less than:' + this.marks[this.marks_min]
this.flag_user_recv_amount_month_min = false
} else if (split[1] && split[1].length > 2) {
this.err_msg = 'Only keep up to two decimal places'
this.flag_user_recv_amount_month_min = false
} else if (publichFun._compareFloat(val, this.base_info.max_limit))
{
this.err_msg = 'Cannot be greater than:' + this.marks[this.marks_max]
this.flag_user_recv_amount_month_min = false
} else {
this.err_msg = ''
this.flag_user_recv_amount_month_min = true
const that = this;
this.input_value[0] = val
this.user_recv_amount[0] = Number(val)
that.isShow =false
setTimeout(function (){
that.isShow = true
}, 1)
}
// Pass parameters to the parent component
this.$emit('input_value', this.input_value)
this.$emit('is_true', (this.flag_user_recv_amount_month_min && this.flag_user_recv_amount_month_max))
},
/**
* @function input value
*/
on_change_input_value_max(val) {
let split = val.split('.')
if (
publichFun._compareFloat(this.base_info.min_limit, val) > 0 || isNaN(val)
) {
this.err_msg = 'Not less than:' + this.marks[this.marks_min]
this.flag_user_recv_amount_month_max = false
} else if (split[1] && split[1].length > 2) {
this.err_msg = 'Only keep up to two decimal places'
this.flag_user_recv_amount_month_max = false
} else if (publichFun._compareFloat(val, this.base_info.max_limit))
{
this.err_msg = 'Cannot be greater than:' + this.marks[this.marks_max]
this.flag_user_recv_amount_month_max = false
} else {
this.err_msg = ''
this.flag_user_recv_amount_month_max = true
const that = this
this.input_value[1] = val
this.user_recv_amount[1] = Number(val)
that.isShow =false
setTimeout(function (){
that.isShow = true
}, 1)
}
// Pass parameters to the parent component
this.$emit('input_value', this.input_value)
this.$emit('is_true', (this.flag_user_recv_amount_month_min && this.flag_user_recv_amount_month_max))
},
on_input_user_recv_amount(val) {
this.err_msg = ''
this.input_value = val
this.flag_user_recv_amount_month_min = true
this.flag_user_recv_amount_month_max = true
this.user_recv_amount[0] = Number(val[0])
this.user_recv_amount[1] = Number(val[1])
// Pass parameters to the parent component
this.$emit('input_value', this.input_value)
this.$emit('is_true', (this.flag_user_recv_amount_month_min && this.flag_user_recv_amount_month_max))
}
}
}
</script>
<style >
.slider-bar-wrp {
padding: 30px 160px;
}
.slider-bar-wrp .slider-bar-input {
margin-bottom: 24px;
width: 150px;
}
.slider-bar-wrp .enhance-payment{
margin-right: -40px;
margin-top: 17px;
}
</style>
.