支付宝小程序扩展表单 长密码框·Long Password
长密码框。
受控模式，使用时需要用 onInput 事件来回设 value。
扫码体验
示例代码
{
"defaultTitle": "verify-code",
"usingComponents":{
"long-password": "mini-ali-ui/es/long-password/index"
}
}<view>
<view style="margin-top: 10px;" />
<view style="padding: 0 10px;">长密码框</view>
<view style="margin-top: 10px;" />
<long-password
placeholder=""
value="{{longPassword}}"
clear="{{true}}"
onInput="onInput"
onClear="onClear" />
</view>Page({
data: {
longPassword: '',
},
onInput(e) {
this.setData({
longPassword: e.detail.value,
});
},
onClear() {
this.setData({
longPassword: '',
});
},
});属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| className | String | - | 自定义的 class。 |
| inputCls | String | - | 自定义 input 的 class。 |
| last | Boolean | false | 是否是最后一行。 |
| value | String | - | 初始内容。 |
| name | String | - | 组件名字，用于表单提交获取数据。 |
| placeholder | String | - | 占位符。 |
| placeholderStyle | String | - | 指定 placeholder 的样式。 |
| placeholderClass | String | - | 指定 placeholder 的样式类。 |
| disabled | Boolean | false | 是否禁用。 |
| maxlength | Number | 140 | 最大长度。 |
| focus | Boolean | false | 获取焦点。 |
| clear | Boolean | true | 是否带清除功能，仅 disabled 为 false 才生效。 |
| onInput | (e: Object) => void | - | 键盘输入时触发input事件。 |
| onConfirm | (e: Object) => void | - | 点击键盘完成时触发。 |
| onFocus | (e: Object) => void | - | 聚焦时触发。 |
| onBlur | (e: Object) => void | - | 失去焦点时触发。 |
| onClear | (e: Object) => void | - | 点击清除 iCON 时触发。 |