如何設定步進器Stepper - Mobile Platform as a Service

一種兩段式控制，增加、減少或修改數值。輸入最大（最小）值無提示，失去焦點後，超過最大（最小）值時系統會自動回顯數值為最大值。當作為表單組件，配合 Form/FormItem 組件使用時，需要設定 mode 的值為 form。

屬性

屬性	類型	必填	預設值	說明
controlled	boolean	否	false	是否受控
value	number	否	-	輸入框的值，表單提交的時候有效
type	'number' \| 'digit'	否	-	輸入框的類型，表單提交的時候有效
min	number	否	-	最小值
max	number	否	-	最大值
step	number	否	1	每次加減的值
inputWidth	string	否	-	輸入框寬度
precision	number	否	-	計算精度，保留幾位小數
autoFocus	boolean	否	false	自動聚焦，iOS 可能會失效
id	string	否	-	表單元素 id
name	string	否	-	表單元素 name
disabled	boolean	否	false	是否禁用
mode	'normal' \| 'form'	否	'normal'	配合 Form/FormItem 組件使用時，需設定為 form
className	string	否	-	類名

事件

事件名	說明	類型
onFocus	聚焦時，觸發此回調	`( e: number ) => void`
onBlur	失去焦點時，觸發此回調	`( e: number ) => void`
onChange	資料變化後，觸發此回調	`( e: number, dataSet: Record<string, any> ) => void`

樣式類

類名	說明
amd-stepper	整體樣式
amd-stepper-disabled	禁用狀態下的整體樣式
amd-stepper-handler	+/- 表徵圖地區樣式
amd-stepper-handler-up	+ 地區樣式
amd-stepper-handler-up	- 地區樣式
amd-stepper-handler-disabled	禁用狀態下 +/- 表徵圖地區樣式
amd-stepper-handler-up-inner	+/- 表徵圖樣式
amd-stepper-input-wrap	輸入框地區樣式
amd-stepper-input	輸入框樣式

程式碼範例

基本使用

index.axml 的程式碼範例如下：

<view>
  <demo-block title="基礎用法">
    <stepper 
      step="{{1}}"
      value="{{0}}"
      inputWidth="60px"/>
  </demo-block>
  <demo-block title="受控組件">
    <stepper 
      data-a="a"
      controlled
      step="{{1}}"
      value="{{value}}"
      inputWidth="60px"
      onChange="handleChange" />
  </demo-block>
  <demo-block title="步長設定">
    <stepper 
      step="{{0.01}}"
      value="{{0}}"/>
  </demo-block>
  <demo-block title="限制輸入範圍">
    <stepper 
      min="{{0}}"
      max="{{10}}"
      step="{{1}}"
      value="{{0}}"/>
  </demo-block>
  <demo-block title="禁用狀態">
    <stepper 
      value="{{0}}"
      disabled/>
  </demo-block>
</view>

index.js 的程式碼範例如下：

Page({
  data: {
    value: 0,
  },
  handleChange(value, dataSet) {
    this.setData({ value });
    console.log(dataSet)
  },
  handleAddValue() {
    this.setData({ value: this.data.value + 1 });
  },
  handleMinusValue() {
    this.setData({ value: this.data.value - 1 });
  },
});

index.acss 的程式碼範例如下：

.actions {
  display: flex;
  justify-content: space-between;
  padding-top: 24rpx;
}
.actions .amd-button {
  width: 47%;
}

index.json 的程式碼範例如下：

{
  "defaultTitle": "Stepper",
  "usingComponents": {
    "stepper": "antd-mini/es/Stepper/index",
    "button": "antd-mini/es/Button/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}