淘宝开放平台

登录
文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

InputItem 文本输入

更新时间：2020/06/24 访问次数：2492

文本输入。

 

 

属性名 描述 类型 默认值
className 自定义的class String ''
labelCls 自定义label的class String ''
inputCls 自定义input的class String ''
last 是否最后一行 Boolean false
value 初始内容 String ''
name 组件名字，用于表单提交获取数据 String ''
type input 的类型，有效值：text, number, idcard, digit String text
password 是否是密码类型 Boolean false
placeholder 占位符 String ''
placeholderStyle 指定 placeholder 的样式 String ''
placeholderClass 指定 placeholder 的样式类 String ''
disabled 是否禁用 Boolean false
maxlength 最大长度 Number 140
focus 获取焦点 Boolean false
clear 是否带清除功能，仅disabled为false才生效 Boolean false
onInput 键盘输入时触发input事件 (e: Object) => void  
onConfirm 点击键盘完成时触发 (e: Object) => void  
onFocus 聚焦时触发 (e: Object) => void  
onBlur 失去焦点时触发 (e: Object) => void  
onClear 点击清除icon时触发 () => void  

 

slots

slotname 说明
extra 可选，用于渲染input-item项右边说明

  

Demo示例

 

示例

 

1
2
3
4
5
6
7
8
9
{
  "defaultTitle": "应用AntUI组件库",
  "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"
  }
}

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<view>
  <view style="margin-top: 10px;" />
  <list>
    <input-item
      data-field="cardNo"
      clear="{{true}}"
      value="{{cardNo}}"
      className="dadada"
      placeholder="银行卡号"
      focus="{{inputFocus}}"
      onInput="onItemInput"
      onFocus="onItemFocus"
      onBlur="onItemBlur"
      onConfirm="onItemConfirm"
      onClear="onClear"
    >
      卡号
      <view slot="extra" class="extra" onTap="onExtraTap"></view>
    </input-item>
    <picker-item
      data-field="bank"
      placeholder="选择发卡银行"
      value="{{bank}}"
      onPickerTap="onPickerTap"
    >
      发卡银行
    </picker-item>
    <input-item
      data-field="name"
      placeholder="姓名"
      type="text"
      value="{{name}}"
      clear="{{true}}"
      onInput="onItemInput"
      onClear="onClear"
    >
      姓名
    </input-item>
    <input-item
      data-field="password"
      placeholder="密码"
      password
    >
      密码
    </input-item>
    <input-item
      data-field="remark"
      placeholder="备注"
      last="{{true}}"
    />
  </list>
  <view style="margin: 10px;">
    <button type="primary" onTap="onAutoFocus">聚焦</button>
  <view>
</view>

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
const banks = ['网商银行', '建设银行', '工商银行', '浦发银行'];
 
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: '选择发卡银行',
      items: banks,
      success: (res) => {
        this.setData({
          bank: banks[res.index],
        });
      },
    });
  },
});

 

1
2
3
4
5
6
7
8
9
10
.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;
}

 

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部