HIPS-UNI-UI

# Stepper 步进器

# 使用指南

import { Stepper } from '@hips/uni-ui/lib/stepper';

export default {
  components: {
    'hips-stepper': Stepper,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-stepper v-model="value" />
1
export default {
  data() {
    return {
      value,
    };
  },
};
1
2
3
4
5
6
7

# 设定大小

<hips-stepper v-model="value" size="large" />
<hips-stepper v-model="value" />
<hips-stepper v-model="value" size="small" />
<hips-stepper v-model="value" :input-width="60" />
1
2
3
4

# 设定范围

<hips-stepper v-model="value" :min="3" :max="10" />
1

# 禁用

<hips-stepper v-model="value" disabled />
1

# 设定步距

<hips-stepper v-model="value" :step="3" />
<hips-stepper v-model="value" :step="0.2" :decimal-length="1" />
1
2

# 数据小数点长度

<hips-stepper v-model="value" :decimal-length="2" />
1

# Stepper API

参数 说明 类型 可选值 默认值
value 使用 v-model 绑定 Number - -
disabled 是否禁用 Boolean - false
min 最小值 Number - 0
max 最大值 Number - Infinity
decimal-length 返回值小数点数量 Number - 0
step 步距 Number - 1
size 大小 String ['large','normal','small'] normal
input-width 输入框宽度 Number - 40

提示

  1. size 设定大小对应值
    大小 对应值
    large 48
    normal 40
    small 32
  2. input-width 取 [input-width, size] 两个属性的最大值

# Stepper Events

名称 说明 参数
over-limit 超过数量时点击按钮触发 按钮类型(minus,plus)
focus 文本 focus 事件 -
blur 文本 blur 事件 -
confirm 文本 confirm 事件 -

# 样式变量

变量名 说明 默认值
stepper-button-bg-color 按钮背景颜色 #EFEFEF
stepper-button-color 按钮文字颜色 #4d4d4d
stepper-button-padding 按钮左右 padding 20rpx
stepper-input-bg-color 输入框背景颜色 #4d4d4d
stepper-input-color 输入框文字颜色 #4d4d4d

注意

Switch 开关