全部产品

文本输入(InputItem)

更新时间:2020-03-26 14:51:34

本文介绍文本输入(InputItem)。

属性名 描述 类型 默认值
className 自定义的 class String ‘’
labelCls 自定义 label 的 class String ‘’
inputCls 自定义 input 的 class String ‘’
last 是否最后一行 Boolean false
value 初始内容 String ‘’
name 组件名字,用于表单提交获取数据 String ‘’
type input 的类型,有效值:textnumberidcarddigit 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 项右边说明

代码示例

  1. {
  2. "defaultTitle": "小程序AntUI组件库",
  3. "usingComponents": {
  4. "list": "mini-antui/es/list/index",
  5. "list-item": "mini-antui/es/list/list-item/index",
  6. "input-item": "mini-antui/es/input-item/index",
  7. "picker-item": "mini-antui/es/picker-item/index"
  8. }
  9. }
  1. <view>
  2. <view style="margin-top: 10px;" />
  3. <list>
  4. <input-item
  5. data-field="cardNo"
  6. clear="{{true}}"
  7. value="{{cardNo}}"
  8. className="dadada"
  9. placeholder="银行卡号"
  10. focus="{{inputFocus}}"
  11. onInput="onItemInput"
  12. onFocus="onItemFocus"
  13. onBlur="onItemBlur"
  14. onConfirm="onItemConfirm"
  15. onClear="onClear"
  16. >
  17. 卡号
  18. <view slot="extra" class="extra" onTap="onExtraTap"></view>
  19. </input-item>
  20. <picker-item
  21. data-field="bank"
  22. placeholder="选择发卡银行"
  23. value="{{bank}}"
  24. onPickerTap="onPickerTap"
  25. >
  26. 发卡银行
  27. </picker-item>
  28. <input-item
  29. data-field="name"
  30. placeholder="姓名"
  31. type="text"
  32. value="{{name}}"
  33. clear="{{true}}"
  34. onInput="onItemInput"
  35. onClear="onClear"
  36. >
  37. 姓名
  38. </input-item>
  39. <input-item
  40. data-field="password"
  41. placeholder="密码"
  42. password
  43. >
  44. 密码
  45. </input-item>
  46. <input-item
  47. data-field="remark"
  48. placeholder="备注"
  49. last="{{true}}"
  50. />
  51. </list>
  52. <view style="margin: 10px;">
  53. <button type="primary" onTap="onAutoFocus">聚焦</button>
  54. <view>
  55. </view>
  1. const banks = ['网商银行', '建设银行', '工商银行', '浦发银行'];
  2. Page({
  3. data: {
  4. cardNo: '1234****',
  5. inputFocus: true,
  6. bank: '',
  7. name: '',
  8. },
  9. onAutoFocus() {
  10. this.setData({
  11. inputFocus: true,
  12. });
  13. },
  14. onExtraTap() {
  15. my.alert({
  16. content: 'extra tapped',
  17. });
  18. },
  19. onItemInput(e) {
  20. this.setData({
  21. [e.target.dataset.field]: e.detail.value,
  22. });
  23. },
  24. onItemFocus() {
  25. this.setData({
  26. inputFocus: false,
  27. });
  28. },
  29. onItemBlur() {},
  30. onItemConfirm() {},
  31. onClear(e) {
  32. this.setData({
  33. [e.target.dataset.field]: '',
  34. });
  35. },
  36. onPickerTap() {
  37. my.showActionSheet({
  38. title: '选择发卡银行',
  39. items: banks,
  40. success: (res) => {
  41. this.setData({
  42. bank: banks[res.index],
  43. });
  44. },
  45. });
  46. },
  47. });
  1. .extra {
  2. background-image: url('https://gw.alipayobjects.com/zos/rmsportal/dOfSJfWQvYdvsZiJStvg.svg');
  3. background-size: contain;
  4. background-repeat: no-repeat;
  5. background-position: right center;
  6. opacity: 0.2;
  7. height: 20px;
  8. width: 20px;
  9. padding-left: 10px;
  10. }