Rainui

Appearance

r-stepper ​

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

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

示例 ​

vue
<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 ​

参数说明类型默认值可选值
value当前输入的值Number|String
min最小值Number1
max最大值Number999
autoFixed是否自动校正超出限制范围的数值，设置为 false 后输入超过限制范围的数值将不会自动校正Booleantruefalse
defaultValue初始值Number | String1
step步长，每次点击时改变的值Number | String1
name标识符，通常为一个唯一的字符串或数字，可以在 change 事件回调参数中获取String | Number
inputWidth输入框宽度String64rpx
buttonSize按钮大小以及输入框高度String56rpx
decimalLength固定显示的小数位数Number
theme样式风格Stringround
placeholder输入框占位提示文字String
integer是否只允许输入整数Booleantruefalse
disabled是否禁用步进器Booleanfalsetrue
disablePlus是否禁用增加按钮Booleanfalsetrue
disableMinus是否禁用减少按钮Booleanfalsetrue
disableInput是否禁用输入框Booleantruetrue
beforeChange输入值变化前的回调函数，返回 false 可阻止输入，支持返回 PromiseFunction
showPlus是否显示增加按钮Booleantruefalse
showMinus是否显示减少按钮Booleantruefalse
showInput是否显示输入框Booleantruefalse
longPress是否开启长按手势，开启后可以长按增加和减少按钮Booleantruefalse
allowEmpty是否允许输入的值为空，设置为 true 后允许传入空字符串Booleanfalsetrue
themeNamer-theme 的主题名称Stringdefault

Events ​

名称说明参数
update:valuevalue 值改变的回调value
changevalue 值改变的回调value
plus点击增加按钮时触发-
minus点击减少按钮时触发-
overlimit点击不可用的按钮时触发-

更多组件，请前往rainui