Stepper

Stepper 是对 Vant 步进器组件的 Formily 适配，除了对空值修改之外，没有对官方的配置项做修改。

注意

为了保持 Formily 字段“空值不自动写脏”的语义，字段初始值为空时不会自动回填 Vant 内建的 defaultValue = 1。如果需要默认值，优先通过 Formily 的 initialValue / initialValues 提供；只有在明确需要组件层默认值时，再显式传入 defaultValue。

基础使用

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Stepper, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    count: 1,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="count"
      title="购买数量"
      :decorator="[FormItem]"
      :component="[Stepper]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

指定步长

通过 step 控制每次点击加减时的变动粒度。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Stepper, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    size: 2,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="size"
      title="每次加 2"
      :decorator="[FormItem]"
      :component="[Stepper, { step: 2 }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

限制范围

通过 min 和 max 约束可输入区间，到达边界后会自动禁用对应按钮。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Stepper, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    tickets: 1,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="tickets"
      title="限购张数"
      :decorator="[FormItem]"
      :component="[Stepper, { min: 1, max: 3 }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

限制输入整数

通过 integer 限制只能输入整数。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Stepper, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    stock: 3,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="stock"
      title="整数库存"
      :decorator="[FormItem]"
      :component="[Stepper, { integer: true, step: 2 }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

禁用状态

通过 disabled 禁用整个步进器。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Stepper, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    count: 2,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="count"
      title="禁用状态"
      :decorator="[FormItem]"
      :component="[Stepper, { disabled: true }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

禁止输入框编辑

通过 disableInput 保留加减按钮，只禁止手动输入。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Stepper, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    count: 3,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="count"
      title="只允许按钮调整"
      :decorator="[FormItem]"
      :component="[Stepper, { disableInput: true }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

固定小数位数

通过 decimalLength 固定展示的小数位数。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Stepper, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    weight: 1,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="weight"
      title="商品重量"
      :decorator="[FormItem]"
      :component="[Stepper, { step: 0.2, decimalLength: 1, min: 1, max: 3 }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

自定义大小

通过 inputWidth 和 buttonSize 调整输入框和按钮尺寸。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Stepper, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    count: 1,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="count"
      title="自定义尺寸"
      :decorator="[FormItem]"
      :component="[Stepper, { inputWidth: 48, buttonSize: 32 }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

异步变更

通过 beforeChange 在值变更前做异步拦截。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Stepper, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { closeToast, showLoadingToast } from 'vant'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    count: 1,
  },
})

function handleBeforeChange() {
  showLoadingToast({
    duration: 0,
    forbidClick: true,
    message: '正在校验',
  })

  return new Promise<boolean>((resolve) => {
    window.setTimeout(() => {
      closeToast()
      resolve(true)
    }, 600)
  })
}
</script>

<template>
  <Form :form="form">
    <Field
      name="count"
      title="异步校验"
      :decorator="[FormItem]"
      :component="[Stepper, { beforeChange: handleBeforeChange }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

圆角风格

通过 theme="round" 使用官方提供的圆角风格。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Stepper, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    count: 1,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="count"
      title="圆角步进器"
      :decorator="[FormItem]"
      :component="[Stepper, { theme: 'round', buttonSize: 22, disableInput: true }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

API

属性

本组件会透传所有的官方属性及事件，可以直接参考Vant Stepper 官方文档。

Stepper ​

基础使用 ​

指定步长 ​

限制范围 ​

限制输入整数 ​

禁用状态 ​

禁止输入框编辑 ​

固定小数位数 ​

自定义大小 ​

异步变更 ​

圆角风格 ​

API ​

属性 ​