前端框架使用vue + element ui ,故选用element ui 组件中的进度条
1. 主页面
<template>
<div class="">
<div class="content-hd">
<h2>双向进度条</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' // 双向进度条
export default {
data() {
return {
// 配置
product_config:{
min_single_amount_lower_limit: 0.1, // 限额下限
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 // 限额下限
this.base_info.max_limit = this.product_config.max_single_amount_upper_limit // 额度上限
this.base_info.user_recv_amount_input = [
this.product_config.default_min_single_amount,
this.product_config.default_max_single_amount
]
},
// 接收进度条子组件传递的数据
user_input_value(value){
this.input_value_for_user = value
},
// 接收进度条子组件传递的数据
is_true_value(value){
this.flag_is_true_value = value
}
}
}
</script>
<style scoped>
/deep/ .el-slider__marks-text {
white-space: nowrap ;