淘宝开放平台

登录
文档中心 > 自研小程序-开发指引

自研小程序-开发指引

AmountInput 金额输入

更新时间：2020/06/24 访问次数：1605

金额输入框。

 

属性名 描述 类型 默认值 必选
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

  

Demo示例

 

示例

 

1
2
3
4
5
6
{
  "defaultTitle": "应用AntUI组件库",
  "usingComponents": {
    "amount-input": "mini-antui/es/amount-input/index"
  }
}

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<view>
  <amount-input
    type="digit"
    title="转入金额"
    extra="建议转入?100以上金额"
    placeholder="输入转入金额"
    value="{{value}}"
    maxLength="5"
    focus="{{true}}"
    btnText="全部提现"
    onClear="onInputClear"
    onInput="onInput"
    onConfirm="onInputConfirm" />
</view>

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Page({
  data: {
    value: 200,
  },
  onInputClear() {
    this.setData({
      value: '',
    });
  },
  onInputConfirm() {
    my.alert({
      content: 'confirmed',
    });
  },
  onInput(e) {
    const { value } = e.detail;
    this.setData({
      value,
    });
  },
  onButtonClick() {
    my.alert({
      content: 'button clicked',
    });
  },
  onInputFocus() {},
  onInputBlur() {},
});

 

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部