全部产品

金额输入(AmountInput)

更新时间:2019-09-09 14:07:28

本文介绍金额输入框(AmountInput)。

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

代码示例

  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. });