全部产品

选择输入(PickerItem)

更新时间:2019-09-09 14:07:21

本文介绍选择输入(PickerItem)。

属性名 描述 类型 默认值
className 自定义的 class String -
labelCls 自定义 label 的 class String -
pickerCls 自定义选择区域的 class String -
last 是否最后一行 Boolean false
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 = ['网商银行', '建设银行', '工商银行', '浦发银行'];
  2. Page({
  3. data: {
  4. bank: '',
  5. },
  6. onSelect() {
  7. my.showActionSheet({
  8. title: '选择发卡银行',
  9. items: banks,
  10. success: (res) => {
  11. this.setData({
  12. bank: banks[res.index],
  13. });
  14. },
  15. });
  16. },
  17. });