InputItem 文本输入

文本输入。

扫码体验：
InputItem 文本输入 - 图1

属性名描述类型默认值
className自定义的classString''
labelCls自定义label的classString''
inputCls自定义input的classString''
last是否最后一行Booleanfalse
value初始内容String''
name组件名字，用于表单提交获取数据String''
typeinput 的类型，有效值：text, number, idcard, digitStringtext
password是否是密码类型Booleanfalse
placeholder占位符String''
placeholderStyle指定 placeholder 的样式String''
placeholderClass指定 placeholder 的样式类String''
disabled是否禁用Booleanfalse
maxlength最大长度Number140
focus获取焦点Booleanfalse
clear是否带清除功能，仅disabled为false才生效Booleanfalse
onInput键盘输入时触发input事件(e: Object) => void
onConfirm点击键盘完成时触发(e: Object) => void
onFocus聚焦时触发(e: Object) => void
onBlur失去焦点时触发(e: Object) => void
onClear点击清除icon时触发() => void

slots

slotname说明
extra可选，用于渲染input-item项右边说明

示例

  1. {
  2.   "defaultTitle": "小程序AntUI组件库",
  3.   "usingComponents": {
  4.     "list": "mini-antui/es/list/index",
  5.     "list-item": "mini-antui/es/list/list-item/index",
  6.     "input-item": "mini-antui/es/input-item/index",
  7.     "picker-item": "mini-antui/es/picker-item/index"
  8.   }
  9. }
  1. <view>
  2.   <view style="margin-top: 10px;" />
  3.   <list>
  4.     <input-item
  5.       data-field="cardNo"
  6.       clear="{{true}}"
  7.       value="{{cardNo}}"
  8.       className="dadada"
  9.       placeholder="银行卡号"
  10.       focus="{{inputFocus}}"
  11.       onInput="onItemInput"
  12.       onFocus="onItemFocus"
  13.       onBlur="onItemBlur"
  14.       onConfirm="onItemConfirm"
  15.       onClear="onClear"
  16.     >
  17.       卡号
  18.       <view slot="extra" class="extra" onTap="onExtraTap"></view>
  19.     </input-item>
  20.     <picker-item
  21.       data-field="bank"
  22.       placeholder="选择发卡银行"
  23.       value="{{bank}}"
  24.       onPickerTap="onPickerTap"
  25.     >
  26.       发卡银行
  27.     </picker-item>
  28.     <input-item
  29.       data-field="name"
  30.       placeholder="姓名"
  31.       type="text"
  32.       value="{{name}}"
  33.       clear="{{true}}"
  34.       onInput="onItemInput"
  35.       onClear="onClear"
  36.     >
  37.       姓名
  38.     </input-item>
  39.     <input-item
  40.       data-field="password"
  41.       placeholder="密码"
  42.       password
  43.     >
  44.       密码
  45.     </input-item>
  46.     <input-item
  47.       data-field="remark"
  48.       placeholder="备注"
  49.       last="{{true}}"
  50.     />
  51.   </list>
  52.   <view style="margin: 10px;">
  53.     <button type="primary" onTap="onAutoFocus">聚焦</button>
  54.   <view>
  55. </view>
  1. const banks = ['网商银行', '建设银行', '工商银行', '浦发银行'];
  3. Page({
  4.   data: {
  5.     cardNo: '1234****',
  6.     inputFocus: true,
  7.     bank: '',
  8.     name: '',
  9.   },
  10.   onAutoFocus() {
  11.     this.setData({
  12.       inputFocus: true,
  13.     });
  14.   },
  15.   onExtraTap() {
  16.     my.alert({
  17.       content: 'extra tapped',
  18.     });
  19.   },
  20.   onItemInput(e) {
  21.     this.setData({
  22.       [e.target.dataset.field]: e.detail.value,
  23.     });
  24.   },
  25.   onItemFocus() {
  26.     this.setData({
  27.       inputFocus: false,
  28.     });
  29.   },
  30.   onItemBlur() {},
  31.   onItemConfirm() {},
  32.   onClear(e) {
  33.     this.setData({
  34.       [e.target.dataset.field]: '',
  35.     });
  36.   },
  37.   onPickerTap() {
  38.     my.showActionSheet({
  39.       title: '选择发卡银行',
  40.       items: banks,
  41.       success: (res) => {
  42.         this.setData({
  43.           bank: banks[res.index],
  44.         });
  45.       },
  46.     });
  47.   },
  48. });
  1. .extra {
  2.   background-image: url('https://gw.alipayobjects.com/zos/rmsportal/dOfSJfWQvYdvsZiJStvg.svg');
  3.   background-size: contain;
  4.   background-repeat: no-repeat;
  5.   background-position: right center;
  6.   opacity: 0.2;
  7.   height: 20px;
  8.   width: 20px;
  9.   padding-left: 10px;
  10. }

原文: https://docs.alipay.com/mini/component-ext/inputitem