支付宝小程序扩展表单 金额输入·AmountInput
2020-09-18 11:22 更新
金额输入框。
扫码体验
示例代码
{
"defaultTitle": "amount-input",
"usingComponents": {
"amount-input": "mini-ali-ui/es/amount-input/index"
}
}
<view>
<amount-input
type="digit"
title="转入金额"
extra="建议转入¥100以上金额"
placeholder="输入转入金额"
value="{{value}}"
maxLength="5"
focus="{{true}}"
btnText="全部提现"
onClear="onInputClear"
onInput="onInput"
onConfirm="onInputConfirm" />
</view>
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() {},
});
属性
属性 | 类型 | 默认值 | 描述 | 必填 | 最低版本 |
---|---|---|---|---|---|
type | String | number | input 的类型,可选值:digit、number。 | 否 | - |
title | String | - | 左上角标题。 | 否 | - |
extra | String | - | 左下角说明。 | 否 | - |
value | String | - | 输入框当前值。 | 否 | - |
btnText | String | - | 右下角按钮文案。 | 否 | - |
placeholder | String | - | placeholder。 | 否 | - |
focus | Boolean | false | 自动获取光标。可选值:true、false。 | 否 | - |
onInput | (e: Object) => void | - | 键盘输入时触发。 | 否 | - |
onFocus | (e: Object) => void | - | 获取焦点时触发。 | 否 | - |
onBlur | (e: Object) => void | - | 失去焦点时触发。 | 否 | - |
onConfirm | (e: Object) => void | - | 点击键盘完成时触发。 | 否 | - |
onClear | () => void | - | 点击 clear 图标触发。 | 否 | - |
onButtonClick | () => void | - | 点击右下角按钮时触发。 | 否 | - |
maxLength | Number | - | 最多允许输入的字符个数。 | 否 | - |
controlled | Boolean | false | 是否为受控组件。为 true时,value 内容会完全受 setData 控制。可选值:true、false。 | 否 | - |
showClear | Boolean | false | 是否一直显示清除 icon。 | 否 | 1.1.3 |
focusAfterClear | Boolean | true | 清除 icon 触发后,输入框是否获得焦点。 | 否 | 1.1.3 |
以上内容是否对您有帮助:
更多建议: