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 |