支付宝小程序扩展表单 文本输入·InputItem
2020-09-18 11:22 更新
文本输入。
说明:
- 输入区内容不折行,如用户输入的字数超出显示区,输入框内的文字可左右滑动;
- 如无特殊情况,清空按钮在框内有内容且获得焦点时默认出现。
扫码体验
示例代码
{
"defaultTitle": "input-item",
"usingComponents":{
"list": "mini-ali-ui/es/list/index",
"input-item": "mini-ali-ui/es/input-item/index",
"am-icon": "mini-ali-ui/es/am-icon/index"
}
}
<view>
<view style="margin-top: 10px;"></view>
<list>
<input-item data-field="cardNo"
clear="{{false}}"
value="{{cardNo}}"
className="dadada"
placeholder="银行卡号"
onInput="onItemInput"
onBlur="onItemBlur"
onConfirm="onItemConfirm"
controlled="{{true}}"
onClear="onClear">
卡号
<view slot="extra" class="extra" onTap="onExtraTap"></view>
</input-item>
<input-item data-field="name"
placeholder="姓名"
type="text"
value="{{name}}"
clear="{{true}}"
onInput="onItemInput"
onClear="onClear">姓名</input-item>
<input-item data-field="password" password="{{true}}"
placeholder="密码">密码</input-item>
<input-item data-field="layerShow1"
placeholder="layer 为 vertical 的排列"
type="text"
layer="vertical"
value="{{layerShow1}}"
clear="{{true}}"
onInput="onItemInput"
onClear="onClear">
竖向表单
<view onTap="onExtraTap" slot="extra">
<am-icon type="phone-book_" size="24" color="#1677ef"></am-icon>
</view>
</input-item>
<input-item data-field="layerShow2"
placeholder="layer 为 vertical 的排列"
type="text"
layer="vertical"
value="{{layerShow2}}"
clear="{{true}}"
onInput="onItemInput"
onClear="onClear">
竖向表单
</input-item>
<input-item data-field="layerShow3"
placeholder="layer 为 vertical 的排列"
type="text"
layer="vertical"
disabled="{{true}}"
value="{{layerShow3}}"
clear="{{true}}"
onInput="onItemInput"
onClear="onClear">
竖向表单
<view onTap="onExtraTap" slot="extra">
<am-icon type="phone-book_" size="24" color="#1677ef"></am-icon>
</view>
</input-item>
<input-item data-field="remark" placeholder="备注"></input-item>
</list>
</view>
Page({
data: {
cardNo: '1234****',
name: '',
layerShow1: '',
layerShow2: '垂直输入框的布局',
layerShow3: 'disabled 状态的 input',
},
onExtraTap() {
my.alert({
content: 'extra tapped',
});
},
onItemInput(e) {
this.setData({
[e.target.dataset.field]: e.detail.value,
});
},
onItemFocus() {},
onItemBlur() {},
onItemConfirm() {},
onClear(e) {
this.setData({
[e.target.dataset.field]: '',
});
},
onSend() {
my.alert({
title: 'verify code sent',
});
},
});
.extra {
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/dOfSJfWQvYdvsZiJStvg.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: right center;
opacity: 0.2;
height: 22px;
width: 22px;
}
属性
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
className | String | - | 自定义的 class。 | - |
labelCls | String | - | 自定义 label 的 class。 | - |
inputCls | String | - | 自定义 input 的 class。 | - |
last | Boolean | false | 是否最后一行。可选值:true、false。 | - |
value | String | - | 初始内容。 | - |
name | String | - | 组件名字,用于表单提交获取数据。 | - |
type | String | text | input 的类型,可选值:text,number,idcard,digit。 | - |
password | Boolean | false | 是否是密码类型。可选值:true、false。 | - |
placeholder | String | - | 占位符。 | - |
placeholderStyle | String | - | 指定 placeholder 的样式。 | - |
placeholderClass | String | - | 指定 placeholder 的样式类。 | - |
disabled | Boolean | false | 是否禁用。可选值:true、false。 | - |
maxlength | Number | 140 | 最大长度。 | - |
focus | Boolean | false | 获取焦点。可选值:true、false。 | - |
clear | Boolean | true | 是否带清除功能,仅 disabled 为 false 才生效。可选值:true、false。 | - |
onInput | (e: Object) => void | - | 键盘输入时触发 input 事件。 | - |
onConfirm | (e: Object) => void | - | 点击键盘完成时触发。 | - |
onFocus | (e: Object) => void | - | 聚焦时触发。 | - |
onBlur | (e: Object) => void | - | 失去焦点时触发。 | - |
onClear | () => void | - | 点击清除 icon 时触发。 | - |
layer | String | - | 文本输入框是否为垂直排列,vertical 时为垂直排列,空值为横向排列。可选值:vertical。 | 1.0.4 |
controlled | Boolean | false | 是否为受控组件。详情请参见 input 组件。 | 1.0.9 |
type 属性值介绍
- text: 字符输入框
- number: 纯数字输入框( 0-9 之间的数字)
- idcard:身份证输入框( 0-9 之间的数字,以及字符 x)
- digit:数字输入框,( 0-9 之间的数字,以及小数点 . 字符,可用于含有小数的数字)
注意:type 的属性值影响的是真机中的键盘类型,在模拟器中并不一定会有效果。
slots
slotname | 说明 | 必填 |
---|---|---|
extra | 用于渲染 input-item 项右边说明。 | 否 |
常见问题
为何 setData 数据为空时,断点 money 值已经置空,但是在输入框还是显示 0?
this.setData 设置 data 为空时,不会渲染页面,建议使用组件的 clear。
以上内容是否对您有帮助:
更多建议: