Vant源码解析(三)van-stepper步进器

**Vant 源码解析 (三) van-stepper 步进器**

在前两篇文章中，我们已经对 Vant 的基本组件进行了源码解析。今天我们将继续深入探索 Vant 的步进器组件——van-stepper。

###什么是步进器？

步进器是一种常见的 UI 组件，用于让用户在某个范围内选择一个值。在 Vant 中，步进器被称为 van-stepper。它可以用来实现各种场景，如时间选择、金额输入等。

### van-stepper 的基本结构van-stepper 的基本结构包括以下几个部分：

* **input**: 步进器的输入区域。
* **button-group**: 步进器的按钮组，包含上下箭头和确认按钮。
* **value**: 当前选择的值。

### van-stepper 的源码解析####1. 组件定义首先，我们来看一下 van-stepper 组件的定义：

javascriptimport { VNode } from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import { ClassableComponent, Classes } from '../common';
import { InputNumberProps } from './input-number';

@Component({
 name: 'VanStepper',
 components: {
 VanInputNumber,
 },
})
export class VanStepper extends ClassableComponent implements InputNumberProps {
 @Prop({ default: '' })
 value!: string;

 @Prop({ default: false })
 disabled!: boolean;

 @Prop({ default: true })
 readonly!: boolean;

 @Prop({ default: 'stepper' })
 type!: string;

 @Prop({ default: '' })
 min!: string;

 @Prop({ default: '' })
 max!: string;

 @Prop({ default:1 })
 step!: number;

 @Watch('value')
 onValueChange(val: string) {
 this.$emit('input', val);
 }

 get classes() {
 return [
 'van-stepper',
 this.type,
 this.disabled ? 'disabled' : '',
 this.readonly ? 'readonly' : '',
 ];
 }
}

html<template>
 <div class="van-stepper" :class="classes">
 <input v-if="!disabled && !readonly"
 type="number"
 :value="value"
 @input="onInput"
 @change="onChange"
 :min="min"
 :max="max"
 :step="step"
 class="van-stepper__input"
 />
 <div v-else-if="disabled || readonly" class="van-stepper__input">
 {{ value }}
 </div>
 <button-group v-if="!disabled && !readonly"
 class="van-stepper__button-group"
 >
 <van-icon name="arrow-down" @click="onDecrement" />
 <van-icon name="arrow-up" @click="onIncrement" />
 </button-group>
 </div>
</template>

javascriptmethods: {
 onInput(event: Event) {
 const value = event.target.value;
 this.$emit('input', value);
 },

 onChange() {
 this.onValueChange(this.value);
 },

 onDecrement() {
 let value = parseInt(this.value,10);
 if (value > this.min) {
 value -= this.step;
 this.$emit('input', value.toString());
 }
 },

 onIncrement() {
 let value = parseInt(this.value,10);
 if (value < this.max) {
 value += this.step;
 this.$emit('input', value.toString());
 }
 },
}