Stepper 步进器

介绍

• 步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。
• 此组件解决了大部分开源UI框架提供的Stepper组件存在的痛点，如无法等待网络请求返回结果后再执行加减操作以及点击时没有进行防抖处理。
• 基于Vue2.x，适用于电商项目。

安装

npm i chan-stepper --save

引入

// 全局引入
import Vue from 'vue';
import chan from 'chan-stepper';

Vue.use(chan);

// 全局按需引入
import Vue from 'vue';
import { Stepper } from 'chan-stepper';

Vue.use(Stepper);

// 在组件里引入
import { Stepper } from 'chan-stepper';

export default {
    name: 'App',
    components: {
        Stepper
    }
}

使用

<Stepper :qty.sync="qty" />
<Stepper v-for="item in shopList" :key="item.id" :qty.sync="item.qty" :item="item" :is-ajax="true" @change="cartChange" @blur="cartBlur" />

Props

| 参数 | 说明 | 类型 | 默认值 | | :------------- |:-------------| :-----| :----- | | qty | 当前输入的值 | Number | String | 1 | step | 步长，每次点击时改变的值 | Number | String | 1 | min | 最小值 | Number | String | 1 | max | 最大值 | Number | String | Infinity | disabled | 是否禁用步进器 | Boolean | false | disable-input | 是否禁用输入框 | Boolean | false | is-ajax | ajax网络请求后才进行加减操作 | Boolean | false | item | 当is-ajax为true时，需要传当前属性值 | Object | {}

Events

| 事件名 | 说明 | 回调参数 | | :------------- |:-------------| :----- | | change | 当绑定值变化时触发的事件，当is-ajax为true时才生效 | item: {}, qty: number | | blur | 输入框失焦时触发，当is-ajax为true时才生效 | item: {}, qty: number |

注意

qty参数一定要添加sync修饰符，change和blur方法生效is-ajax属性必须为true。

<Stepper :qty.sync="qty" step="1" max="5" :is-ajax="true" @change="stepperChange" />

• 地址