首先，确保你已经安装了Vant3组件库。你可以使用npm或者yarn进行安装：
npm install vant@next
# 或者
yarn add vant@next
然后，在你的Vue组件中引入并注册Stepper组件：
<template>
<div>
<van-stepper v-model="stepperValue" :min="1" :max="10" />
<p>当前值: {{ stepperValue }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
import { Stepper } from 'vant';
export default {
components: {
[Stepper.name]: Stepper,
},
setup() {
const stepperValue = ref(1);
return {
stepperValue,
};
},
};
</script>
在上述例子中，我们使用Vue 3的ref函数创建一个响应式的stepperValue变量，用于存储用户选择的步进器值。然后，我们在模板中使用<van-stepper>标签引入了Vant3的Stepper组件，并通过v-model将stepperValue与步进器的值进行绑定。通过:min和:max属性设置步进器的最小和最大值。
通过上述设置，用户可以通过加减按钮调整步进器的值，stepperValue变量会自动更新，从而获取用户选择的步进器值。
请确保你的项目已正确配置Vant3，并根据你的实际需求调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5730/Vant