AmountInput
Amount input box
Sample Code
copy
// API-DEMO page/component/amount-input/amount-input.json
{
"defaultTitle": "Mini Program AntUI component library",
"usingComponents": {
"amount-input": "mini-antui/es/amount-input/index"
}
}
copy
<!-- API-DEMO page/component/amount-input/amount-input.axml -->
<view>
<amount-input
type="digit"
title="Charge amount"
extra=”Suggest charge amount above ¥100 "
placeholder="Enter charge amount"
value="{{value}}"
maxLength="5"
focus="{{true}}"
btnText="Withdraw all"
onClear="onInputClear"
onInput="onInput"
onConfirm="onInputConfirm" />
</view>
copy
// API-DEMO page/component/amount-input/amount-input.js
Page({
data: {
value: 200,
},
onInputClear() {
this.setData({
value: '',
});
},
onInputConfirm(e) {
console.log(e);
my.alert({
content: 'confirmed',
});
},
onInput(e) {
console.log(e);
const { value } = e.detail;
this.setData({
value,
});
},
onButtonClick() {
my.alert({
content: 'button clicked',
});
},
onInputFocus(e) {
console.log(e);
},
onInputBlur(e) {
console.log(e);
},
});
Attributes
Property | Description | Type | Default | Required |
type | Type of input, effective values include digit and number. | String | number | No |
title | Title in the upper-left corner. | String | - | No |
extra | Description in the bottom-right corner. | String | - | No |
value | Current value of the input box. | String | - | No |
btnText | Text of the bottom-right corner button. | String | - | No |
placeholder | Placeholder. | String | - | No |
focus | Get cursor automatically. | Boolean | false | No |
onInput | Trigger on keyboard input. | (e: Object) => void | - | No |
onFocus | Trigger on getting focus. | (e: Object) => void | - | No |
onBlur | Trigger on losing focus. | (e: Object) => void | - | No |
onConfirm | Trigger on clicking keyboard completion. | (e: Object) => void | - | No |
onClear | Trigger on clicking clear icon. | () => void | - | No |
onButtonClick | Trigger on clicking bottom-right corner button. | () => void | - | No |
maxLength | Maximum number of characters allowed for input. | Number | - | No |
controlled | Is controlled component or not If true, value contents are under full control of setData. | Boolean | false | No |