AmountInput 金额输入

金额输入框。

扫码体验:
AmountInput 金额输入 - 图1

属性名描述类型默认值必选
typeinput 的类型,有效值:digit、numberStringnumberfalse
title左上角标题Stringfalse
extra左下角说明Stringfalse
value输入框当前值Stringfalse
btnText右下角按钮文案Stringfalse
placeholderplaceholderStringfalse
focus自动获取光标Booleanfalsefalse
onInput键盘输入时触发(e: Object) => voidfalse
onFocus获取焦点时触发(e: Object) => voidfalse
onBlur失去焦点时触发(e: Object) => voidfalse
onConfirm点击键盘完成时触发(e: Object) => voidfalse
onClear点击 clear 图标触发() => voidfalse
onButtonClick点击右下角按钮时触发() => voidfalse
maxLength最多允许输入的字符个数Numberfalse
controlled是否为受控组件。为 true时,value内容会完全受setData控制Booleanfalsefalse

示例

  1. {
  2. "defaultTitle": "小程序AntUI组件库",
  3. "usingComponents": {
  4. "amount-input": "mini-antui/es/amount-input/index"
  5. }
  6. }
  1. <view>
  2. <amount-input
  3. type="digit"
  4. title="转入金额"
  5. extra="建议转入¥100以上金额"
  6. placeholder="输入转入金额"
  7. value="{{value}}"
  8. maxLength="5"
  9. focus="{{true}}"
  10. btnText="全部提现"
  11. onClear="onInputClear"
  12. onInput="onInput"
  13. onConfirm="onInputConfirm" />
  14. </view>
  1. Page({
  2. data: {
  3. value: 200,
  4. },
  5. onInputClear() {
  6. this.setData({
  7. value: '',
  8. });
  9. },
  10. onInputConfirm() {
  11. my.alert({
  12. content: 'confirmed',
  13. });
  14. },
  15. onInput(e) {
  16. const { value } = e.detail;
  17. this.setData({
  18. value,
  19. });
  20. },
  21. onButtonClick() {
  22. my.alert({
  23. content: 'button clicked',
  24. });
  25. },
  26. onInputFocus() {},
  27. onInputBlur() {},
  28. });

原文: https://docs.alipay.com/mini/component-ext/amountinput