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://gw.alipayobjects.com/zos/rmsportal/dOfSJfWQvYdvsZiJStvg.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: right center;
      opacity: 0.2;
      height: 20px;
      width: 20px;
      padding-left: 10px;
    }