range-controler

1.0.4 • Public • Published

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:

image

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 image

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

Package Sidebar

Install

npm i range-controler

Weekly Downloads

5

Version

1.0.4

License

none

Unpacked Size

141 kB

Total Files

6

Last publish

Collaborators

  • yolosweet679