chan-stepper

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" />

• 地址