Copy of PickerItem
Selection input.
Sample Code
copy
// 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"
}
}
copy
<!-- 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>
copy
// 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],
});
},
});
},
});
copy
/* 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;
}
Attributes
Property | Description | Type | Default |
className | Customized class. | String | - |
labelCls | Customized label class. | String | - |
pickerCls | Customized selection region class. | String | - |
last | Is the last row or not. | Boolean | false |
value | Initial contents. | String | - |
name | Component name, used for getting data via form submission. | String | - |
placeholder | Placeholder. | String | - |
onPickerTap | Trigger on clicking pickeritem. | (e: Object) => void | - |
Slots
slotname | Description | Required |
extra | Used to render the description right to picker-item. | No |