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

DescriptionTypeDefault

Required

typeType of input, effective values include digit and number.String numberNo
titleTitle in the upper-left corner.String-No
extraDescription in the bottom-right corner.String-No
valueCurrent value of the input box.String-No
btnTextText of the bottom-right corner button.String-No
placeholderPlaceholder.String-No
focusGet cursor automatically.BooleanfalseNo
onInputTrigger on keyboard input.(e: Object) => void-No
onFocusTrigger on getting focus.(e: Object) => void-No
onBlurTrigger on losing focus.(e: Object) => void-No
onConfirmTrigger on clicking keyboard completion.(e: Object) => void-No
onClearTrigger on clicking clear icon.() => void-No
onButtonClickTrigger on clicking bottom-right corner button.() => void-No
maxLengthMaximum number of characters allowed for input.Number-No
controlledIs controlled component or not If true, value contents are under full control of setData.BooleanfalseNo