支付宝小程序扩展表单 金额输入·AmountInput
金额输入框。
扫码体验
示例代码
{
"defaultTitle": "amount-input",
"usingComponents": {
"amount-input": "mini-ali-ui/es/amount-input/index"
}
}
<view>
<amount-input
type="digit"
title="转入金额"
extra="建议转入¥100以上金额"
placeholder="输入转入金额"
value="{{value}}"
maxLength="5"
focus="{{true}}"
btnText="全部提现"
onClear="onInputClear"
onInput="onInput"
onConfirm="onInputConfirm" />
</view>Page({
data: {
value: 200,
},
onInputClear() {
this.setData({
value: '',
});
},
onInputConfirm() {
my.alert({
content: 'confirmed',
});
},
onInput(e) {
const { value } = e.detail;
this.setData({
value,
});
},
onButtonClick() {
my.alert({
content: 'button clicked',
});
},
onInputFocus() {},
onInputBlur() {},
});属性
| 属性 | 类型 | 默认值 | 描述 | 必填 | 最低版本 |
|---|---|---|---|---|---|
| type | String | number | input 的类型，可选值：digit、number。 | 否 | - |
| title | String | - | 左上角标题。 | 否 | - |
| extra | String | - | 左下角说明。 | 否 | - |
| value | String | - | 输入框当前值。 | 否 | - |
| btnText | String | - | 右下角按钮文案。 | 否 | - |
| placeholder | String | - | placeholder。 | 否 | - |
| focus | Boolean | false | 自动获取光标。可选值：true、false。 | 否 | - |
| onInput | (e: Object) => void | - | 键盘输入时触发。 | 否 | - |
| onFocus | (e: Object) => void | - | 获取焦点时触发。 | 否 | - |
| onBlur | (e: Object) => void | - | 失去焦点时触发。 | 否 | - |
| onConfirm | (e: Object) => void | - | 点击键盘完成时触发。 | 否 | - |
| onClear | () => void | - | 点击 clear 图标触发。 | 否 | - |
| onButtonClick | () => void | - | 点击右下角按钮时触发。 | 否 | - |
| maxLength | Number | - | 最多允许输入的字符个数。 | 否 | - |
| controlled | Boolean | false | 是否为受控组件。为 true时，value 内容会完全受 setData 控制。可选值：true、false。 | 否 | - |
| showClear | Boolean | false | 是否一直显示清除 icon。 | 否 | 1.1.3 |
| focusAfterClear | Boolean | true | 清除 icon 触发后，输入框是否获得焦点。 | 否 | 1.1.3 |