介绍

通过键盘或按钮输入或改变数值。

引入

import Stepper from 'sard-uniapp/components/stepper/stepper.vue'

代码演示

基础使用

使用 v-model 绑定输入框值。

vue lang="ts"

<template>
  <sar-stepper placeholder="数量" v-model="value" @change="onChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue lang="js"

<template>
  <sar-stepper placeholder="数量" v-model="value" @change="onChange" />
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

最大最小值

使用 min 和 max 属性限制可以输入的最大最小值。

vue lang="ts"

<template>
  <sar-stepper placeholder="数量" v-model="value" :min="0" :max="5" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
</script>

vue lang="js"

<template>
  <sar-stepper placeholder="数量" v-model="value" :min="0" :max="5" />
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref();
</script>

步长

使用 step 属性设置点击增加或减少按钮时变化的值。

vue lang="ts"

<template>
  <sar-stepper placeholder="数量" v-model="value" :step="5" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
</script>

vue lang="js"

<template>
  <sar-stepper placeholder="数量" v-model="value" :step="5" />
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref();
</script>

精度

使用 precision 属性设置数值的精度，即保留的小数位数，底层通过 toFixed 实现，因此需要设置大于等于 0 的整数。

vue lang="ts"

<template>
  <sar-stepper placeholder="数量" v-model="value" :precision="2" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
</script>

vue lang="js"

<template>
  <sar-stepper placeholder="数量" v-model="value" :precision="2" />
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref();
</script>

只读和禁用

只读或禁用时无法输入。

<template>
  <doc-title>只读</doc-title>
  <sar-stepper placeholder="数量" model-value="5" readonly />

  <doc-title>禁用</doc-title>
  <sar-stepper placeholder="数量" model-value="5" disabled />
</template>

尺寸

设置 size="small" 可以小尺寸展示步进器。

vue lang="ts"

<template>
  <sar-stepper placeholder="数量" v-model="value" size="small" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
</script>

vue lang="js"

<template>
  <sar-stepper placeholder="数量" v-model="value" size="small" />
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref();
</script>

API

StepperProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
model-value (v-model)	当前输入值	number | string	-
min	最小值	number	Number.MIN_SAFE_INTEGER
max	最大值	number	Number.MAX_SAFE_INTEGER
value-on-clear	当输入框被清空时显示的值	number | null | 'min' | 'max'	null
step	点击按钮时增加或减少的数值	number	1
precision	数值精度，即允许的小数位数	number	-
input-style	输入框样式	string	-
input-type	输入框类型	'number' | 'digit' | 'text'	'number'
placeholder	输入框占位符	string	-
disabled	禁用状态	boolean	false
readonly	只读状态	boolean	false
press	是否可以通过长按增加/减少按钮改变数值	boolean	true
press-time	触发长按事件的时间，单位毫秒	boolean	350
interval	长按改变数值的时间间隔，单位毫秒	number	150
validate-event	是否触发表单验证	boolean	true
size	步进器尺寸	'medium' | 'small'	'medium'

StepperEmits

事件	描述	类型
update:model-value	输入框值改变时触发	(value: number | string | undefined) => void
change 1.9.2+	输入框值改变时触发	(value: number | string | undefined) => void
focus	输入框聚焦时触发	(event: any) => void
blur	输入框失焦时触发	(event: any) => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-stepper-height: 64rpx;
  --sar-stepper-gap: 8rpx;
  --sar-stepper-bg: var(--sar-secondary-bg);

  --sar-stepper-input-width: 80rpx;
  --sar-stepper-input-padding-x: 10rpx;
  --sar-stepper-input-font-size: var(--sar-text-base);
  --sar-stepper-input-disabled-color: var(--sar-disabled-color);
  --sar-stepper-placeholder-color: var(--sar-fourth-color);

  --sar-stepper-button-font-size: var(--sar-text-lg);
  --sar-stepper-button-border-radius: var(--sar-rounded-sm);
  --sar-stepper-button-active-bg: var(--sar-active-deep-bg);

  --sar-stepper-height-sm: 56rpx;
  --sar-stepper-input-width-sm: 64rpx;
  --sar-stepper-input-font-size-sm: var(--sar-text-sm);
  --sar-stepper-button-font-size-sm: var(--sar-text-base);
}