Stepper 步进器
type : 'stepper'
步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字。
代码演示
基础用法
<template>
<div class="">
<x-form ref="formRef" :model="formValue" :items="formOptions" />
<div style="margin:10px">
<van-button @click="onSubmit" block type="primary">验证</van-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref<Indexable>({
input: '',
});
const formOptions = ref([
{
type: 'stepper',
label: 'Stepper',
name: 'stepper',
required: true,
attrs: {
min: -100,
max: 5,
inputWidth: 80,
}
},
]);
const onSubmit = () => {
formRef.value?.validate().then(() => {
console.log('submit values =', formValue.value);
}).catch((error: any) => {
console.log('error', error);
})
}
</script>
<style lang="scss" scoped></style>
基础用法
API
Props
与官方组件 Stepper 步进器 参数保持一致,这里以展示新增属性配置为主,具体配置参见官方文档。