# Stepper 步进器

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

# 平台差异说明

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

# 示例

# 基础用法

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

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

<pi-stepper v-model="val" :min="2" :max="12" />
1
export default {
  data() {
    return {
      val: 10
    }
  }
}
1
2
3
4
5
6
7

# 禁用步进器

disabled 设置步进器为禁用状态

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

# 自定义按钮颜色

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 属性设置按钮的形状,可选值如下:

  1. square : 方形按钮
  2. 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 />
1

# 显示输入框

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

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

# 步长设置

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" />
1

# 只显示增加按钮

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

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

# 固定两位小数

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" />
1

# 设置输入框宽度

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

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

# 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
Last updated: 2021/7/20 下午6:34:05
10:44