# Stepper 步进器

此组件用于计数，适用于购物车等物品的计数

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基础用法

min 属性设置步进器计数的最小值

max 属性设置步进器计数的最大值

<pi-stepper v-model="val" :min="2" :max="12" />

export default {
  data() {
    return {
      val: 10
    }
  }
}

1
2
3
4
5
6
7

# 禁用步进器

disabled 设置步进器为禁用状态

<pi-stepper v-model="val" :min="2" :max="12" disabled />

# 自定义按钮颜色

button-color 属性设置按钮的自定义颜色

<pi-stepper v-model="val" :min="2" :max="12" button-color="#00e09e" />
<pi-stepper v-model="val" :min="2" :max="12" button-color="#003a6f" />

1
2

# 按钮形状

shape 属性设置按钮的形状，可选值如下：

square : 方形按钮
round ：圆形按钮（默认）

<pi-stepper v-model="val" :min="2" :max="12" shape="square" />
<pi-stepper v-model="val" :min="2" :max="12" shape="round" />

1
2

# 设置实底模式主题

fill 属性值设置按钮的实底填充主题

<pi-stepper v-model="val" :min="2" :max="12" theme="fill" />
<pi-stepper v-model="val" :min="2" :max="12" theme="fill" shape="square" />

1
2

# 禁用步进器

disabled 设置步进器为禁用状态

<pi-stepper v-model="val" :min="2" :max="12" disabled />

# 显示输入框

disable-input 设置输入框是否编辑

<pi-stepper v-model="val" :min="2" :max="12" :disable-input="false" />

# 步长设置

step 设置该属性修改步长

<pi-stepper v-model="val6" :min="2" :max="12" :step="0.5" :disable-input="false" :decimal="1" />
<pi-stepper v-model="val06" :min="5" :max="30" :step="5" :disable-input="false" />

1
2

# 只显示减少按钮

show-subtract 设置减少按钮的显示与隐藏

<pi-stepper v-model="val" :min="2" :max="12" :show-subtract="false" />

# 只显示增加按钮

show-add 设置增加按钮的显示与隐藏

<pi-stepper v-model="val" :min="2" :max="12" :show-add="false" />

# 固定两位小数

decimal 设置该属性修改步长的小数位

<pi-stepper
  v-model="val9"
  :min="2"
  :max="12"
  :disable-input="false"
  :step="0.03"
  :decimal="2"
/>

1
2
3
4
5
6
7
8

# 自定义按钮大小

button-size 设置按钮的大小

<pi-stepper v-model="val" :min="2" :max="12" :button-size="80" />

# 设置输入框宽度

input-width 自定义输入框的宽度

<pi-stepper v-model="val" :min="2" :max="12" :input-width="200" />

# API

# Stepper Props

名称	描述	类型	必选	默认值
v-mode/value	初始值	—	`false`	-
customStyle	自定义样式，对象形式	`Object`	`false`	-
inputStyle	自定义输入样式，对象形式（默认值：{}）	`Object`	`false`	-
customClass	自定义样式类，字符串形式	`String`	`false`	-
min	最小值	`Number`	`false`	1
max	最大值	`Number`	`false`	null
step	步长，每次点击时改变的值	`Number`	`false`	1
inputWidth	输入框宽度，默认单位为 rpx	`String` / `Number`	`false`	84
buttonSize	按钮大小	`String` / `Number`	`false`	50
buttonColor	按钮颜色	`String` / `Number`	`false`	-
decimal	小数位	`Number`	`false`	0
shape	形状	`round`, `square`	`false`	'round'
theme	主题模式	`line: 线框模式`，`fill: 实底模式`	`false`	'line'
integer	是否只允许输入整数	`Boolean`	`false`	false
showAdd	是否显示增加按钮	`Boolean`	`false`	true
showSubtract	是否显示减少按钮	`Boolean`	`false`	true
disabled	是否禁用步进器	`Boolean`	`false`	false
disableInput	是否禁用输入框	`Boolean`	`false`	true

← UploadImg 图片上传 CalendarInput 日历输入 →