更新记录

1.0.9（2025-10-30） 下载此版本

fix: 组件主题

1.0.8（2024-08-23） 下载此版本

修复最小值为0不生效的bug

1.0.7（2024-08-23） 下载此版本

修复指定小数位数修改不成功的bug

平台兼容性

uni-app(4.34)

其他

r-stepper

r-stepper 是uniapp vue3的步进器，由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

在线示例 完整文档 完整文档

示例

<template>
  <r-config-provider :themeName="themeName">
    <page-header title="步进器"></page-header>
    <view style="padding: 20rpx 0">
      <r-cell-group inset>
        <r-cell title="基础用法">
          <template #value>
            <r-stepper v-model:value="value" />
          </template>
        </r-cell>

        <r-cell title="步长设置">
          <template #value>
            <r-stepper v-model:value="value" step="2" />
          </template>
        </r-cell>

        <r-cell title="限制输入范围">
          <template #value>
            <r-stepper v-model:value="value2" :min="5" :max="8" />
          </template>
        </r-cell>

        <r-cell title="限制输入整数">
          <template #value>
            <r-stepper v-model:value="value3" integer />
          </template>
        </r-cell>

        <r-cell title="禁用状态">
          <template #value>
            <r-stepper v-model:value="value" disabled />
          </template>
        </r-cell>

        <r-cell title="禁用输入框">
          <template #value>
            <r-stepper v-model:value="value" disable-input />
          </template>
        </r-cell>

        <r-cell title="固定小数位数">
          <template #value>
            <r-stepper v-model:value="value4" step="0.2" :decimal-length="1" />
          </template>
        </r-cell>

        <r-cell title="自定义大小">
          <template #value>
            <r-stepper
              v-model:value="value"
              input-width="40px"
              button-size="32px"
            />
          </template>
        </r-cell>

        <r-cell title="圆角风格">
          <template #value>
            <r-stepper
              v-model:value="value"
              theme="round"
              button-size="22"
              disable-input
            />
          </template>
        </r-cell>
      </r-cell-group>
    </view>
  </r-config-provider>
</template>

<script setup>
import { ref } from "vue";
import useTheme from "@/hooks/useTheme";
const { themeName } = useTheme();
const value = ref(1);
const value2 = ref(5);
const value3 = ref(1);
const value4 = ref(1.0);
</script>

API

Props

Events

更多组件，请前往rainui