elementUI slider单向进度条

前端框架使用vue + element ui ,故选用element ui 组件中的进度条

Element组件地址

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
        },