elementUI slider双向进度条

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

Element组件地址

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 ;