在 Vant4 中,van-stepper 是用于步进操作的组件。以下是一个简单的例子,演示如何在 Vant4 中使用步进器组件:

首先,确保你已经安装了 Vant4:
npm install vant@next

然后,在你的 Vue 组件中引入 van-stepper:
<template>
  <div>
    <van-stepper v-model="stepperValue" />
    <p>当前值: {{ stepperValue }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Stepper } from 'vant';
import 'vant/lib/index.css'; // 引入样式

export default {
  components: {
    [Stepper.name]: Stepper,
  },
  setup() {
    const stepperValue = ref(1);

    return {
      stepperValue,
    };
  },
};
</script>

在上面的例子中,我们使用了 van-stepper 组件,并通过 v-model 指令将步进器的值与一个 Vue 变量 stepperValue 进行双向绑定。

你可以根据需要设置 van-stepper 组件的一些属性,比如 min 和 max 来设置步进器的最小值和最大值,默认是 1 和 Infinity。还可以使用 step 来设置步进器的步长,默认是 1。

在这个例子中,我们在步进器下方显示了当前的值,你可以根据实际需求自定义步进器的样式和其他属性。


转载请注明出处:http://www.zyzy.cn/article/detail/5814/Vant