InputItem

	// API-DEMO page/component/input-item/input-item.json
	{
	  "defaultTitle": "Mini Program AntUI component library",
	  "usingComponents": {
	    "list": "mini-antui/es/list/index",
	    "list-item": "mini-antui/es/list/list-item/index",
	    "input-item": "mini-antui/es/input-item/index",
	    "picker-item": "mini-antui/es/picker-item/index"
	  }
	}

	<!-- API-DEMO page/component/input-item/input-item.axml -->
	<view>
	  <view style="margin-top: 10px;" />
	  <list>
	    <input-item
	      data-field="cardNo"
	      clear="{{true}}"
	      value="{{cardNo}}"
	      className="dadada"
	      placeholder="Bank card number"
	      focus="{{inputFocus}}"
	      onInput="onItemInput"
	      onFocus="onItemFocus"
	      onBlur="onItemBlur"
	      onConfirm="onItemConfirm"
	      onClear="onClear"
	    >
	      Card number
	      <view slot="extra" class="extra" onTap="onExtraTap"></view>
	    </input-item>
	    <picker-item
	      data-field="bank"
	      placeholder="Select issuing bank"
	      value="{{bank}}"
	      onPickerTap="onPickerTap"
	    >
	      Issuing bank
	    </picker-item>
	    <input-item
	      data-field="name"
	      placeholder="Name"
	      type="text"
	      value="{{name}}"
	      clear="{{true}}"
	      onInput="onItemInput"
	      onClear="onClear"
	    >
	      Name 
	    </input-item>
	    <input-item
	      data-field="password"
	      placeholder="Password"
	      password
	    >
	      Password 
	    </input-item>
	    <input-item
	      data-field="remark"
	      placeholder="Remarks"
	      last="{{true}}"
	    />
	  </list>
	  <view style="margin: 10px;">
	    <button type="primary" onTap="onAutoFocus">Focus</button>
	  </view>
	</view>

	// API-DEMO page/component/input-item/input-item.js
	const banks = ['Mybank', 'CCB', 'ICBC', 'SPDB'];
	
	Page({
	  data: {
	    cardNo: '1234****',
	    inputFocus: true,
	    bank: '',
	    name: '',
	  },
	  onAutoFocus() {
	    this.setData({
	      inputFocus: true,
	    });
	  },
	  onExtraTap() {
	    my.alert({
	      content: 'extra tapped',
	    });
	  },
	  onItemInput(e) {
	    this.setData({
	      [e.target.dataset.field]: e.detail.value,
	    });
	  },
	  onItemFocus() {
	    this.setData({
	      inputFocus: false,
	    });
	  },
	  onItemBlur() {},
	  onItemConfirm() {},
	  onClear(e) {
	    this.setData({
	      [e.target.dataset.field]: '',
	    });
	  },
	  onPickerTap() {
	    my.showActionSheet({
	      title: 'Select issuing bank',
	      items: banks,
	      success: (res) => {
	        this.setData({
	          bank: banks[res.index],
	        });
	      },
	    });
	  },
	});

	/* API-DEMO page/component/input-item/input-item.acss */
	.extra {
	  background-image: url('https://img.example.com/example.svg');
	  background-size: contain;
	  background-repeat: no-repeat;
	  background-position: right center;
	  opacity: 0.2;
	  height: 20px;
	  width: 20px;
	  padding-left: 10px;
	}