range-controler

range-controler

Description

This is a Vue2 based component and is used to represent what users want to do in different ranges. For example, this component can be used to control customers to receive different recharge rewards as the recharge amount changes in a recharge activity.

Installation

You need node.js and npm

npm i range-controler

in xxx.vue

import inputRangeConfiger from 'range-controler'

components: {
    inputRangeConfiger
},

For example, When used with the el-dialog component:

<el-dialog title="" :visible.sync="dialogVisible" width="60%">
    <el-form>
    <inputRangeConfiger 
        :configArr.sync="arr" 
        label="Recharge amount" 
        :purpose="true" 
        :step="1" 
        :aimAttri="aimAttri"
        :add-step="1000"
        :infinite="false"
    >
        <template v-slot:purpose="scope">
        <el-form :inline="true">
            <el-form-item label="Additional gift ratio：">
            <el-input-number v-model="arr[scope.row.index].discount" :min="1" :max="100" ></el-input-number>%
            </el-form-item>
            <el-form-item label="Gifts：">
            <el-input v-model="arr[scope.row.index].gift" type="text"></el-input>
            </el-form-item>
        </el-form>
        </template>
    </inputRangeConfiger>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">confirm</el-button>
    </span>
</el-dialog>

data(){
    return {
        arr:[
            {
                from:0,
                to:1000,
            },
            {
                from:1001,
                to:2001
            }
        ],
        aimAttri: {
            discount: 0,
            gift: ''
        },
    }
}

after I set the values of discount and gift:

and its corresponding results:

 [{ from: 0, to: 1000, discount: 1, gift: 'Random S-level skin' }, { from: 1001, to: 2001, discount: 2, gift: 'Custom spraying' }]

Of course, you can modify the field name through different attributes in the following document.

Reminder Information: The ranges of the interval here will not overlap, and when any one range is modified, the values of other ranges will also change, with the manually modified range having the highest priority.

and here you can add a attribute slideble to change the range by sliding

Attributes