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

Attribute	Description	Type	Default
configArr	binding value	Array	[{ from : 0, to: 5 } ]
step	incremental step and mutatioin step	Number	1
label	label text	String	Range
purpose	Whether to use slots for specific purposes	Boolean	false
aimAttri	specific purposes object. It only takes effect when purpose is true	Object	{ aimrow: 0 }
readonly	same as readonly in native input, but pay attention to the form elements in "templete v-slot:purpose", you can add readonly attribute manually	Boolean	false
minNum	minimum number of intervals	Number	1
addStep	The range size of the newly added item	Number	1000
infinite	Can it end with 0 and represent infinity	Boolean	true
from	Custom fields represent the starting point of the range	String	from
to	Custom fields represent the endpoint of the range	String	to
numLabel	range amount label	String	range amount
slidable	change the value by sliding	Boolean	false