PickerItem 选择输入

文本输入。

扫码体验：
PickerItem 选择输入 - 图1
选择输入。

属性名描述类型默认值
className自定义的classString
labelCls自定义label的classString
pickerCls自定义选择区域的classString
last是否最后一行Booleanfalse
value初始内容String
name组件名字，用于表单提交获取数据String
placeholder占位符String
onPickerTap点击pickeritem时触发(e: Object) => void

slots

slotname说明
extra可选，用于渲染picker-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.     "picker-item": "mini-antui/es/picker-item/index",
  7.     "input-item": "mini-antui/es/input-item/index"
  8.   }
  9. }
  1. <view>
  2.   <list>
  3.     <input-item
  4.       data-field="password"
  5.       placeholder="密码"
  6.       password
  7.     >
  8.       密码
  9.     </input-item>
  10.     <picker-item
  11.       data-field="bank"
  12.       placeholder="选择发卡银行"
  13.       value="{{bank}}"
  14.       onPickerTap="onSelect"
  15.     >
  16.       发卡银行
  17.     </picker-item>
  18.   </list>
  19. </view>
  1. const banks = ['网商银行', '建设银行', '工商银行', '浦发银行'];
  3. Page({
  4.   data: {
  5.     bank: '',
  6.   },
  7.   onSelect() {
  8.     my.showActionSheet({
  9.       title: '选择发卡银行',
  10.       items: banks,
  11.       success: (res) => {
  12.         this.setData({
  13.           bank: banks[res.index],
  14.         });
  15.       },
  16.     });
  17.   },
  18. });

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