全部产品

AmountInput 金额输入

金额输入框。

扫码体验

image.png

示例代码

// API-DEMO page/component/amount-input/amount-input.json
{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "amount-input": "mini-antui/es/amount-input/index"
  }
}

<!-- API-DEMO page/component/amount-input/amount-input.axml -->
<view>
  <amount-input
    type="digit"
    title="转入金额"
    extra="建议转入¥100以上金额"
    placeholder="输入转入金额"
    value="{{value}}"
    maxLength="5"
    focus="{{true}}"
    btnText="全部提现"
    onClear="onInputClear"
    onInput="onInput"
    onConfirm="onInputConfirm" />
</view>

// 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);
  },
});

属性

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