前端框架使用vue + element ui ,故选用element ui 组件中的进度条
1. 主页面
<template>
<div class="">
<div class="content-hd">
<h2>单向进度条</h2>
</div>
<div class="content-bd">
<OneWaySliderBar
:base_info="base_info"
v-on:input_value="user_input_value"
v-on:is_true="is_true_value"
></OneWaySliderBar>
</div>
</div>
</template>
<script>
import publichFun from "../utils/fun"
import OneWaySliderBar from '../components/oneWaySliderBar' // 单向进度条
export default {
data() {
return {
// 配置
product_config:{
max_send_amount_upper_limit: 5000, // 额度上限
default_max_send_amount: 2000,
},
base_info: {
},
max_send_amount : '',
flag_is_true_value: '',
}
},
created() {
this.authority()
},
mounted() {
},
components: {
OneWaySliderBar
},
methods: {
authority() {
// 额度展示增加千分位
this.max_send_amount= publichFun._addMilliFormat(this.product_config.default_max_send_amount)
this.base_info.min_limit = 0 // 限额下限
this.base_info.max_limit = this.product_config.max_send_amount_upper_limit // 额度上限
this.base_info.user_recv_amount_input = this.product_config.default_max_send_amount
},