如何使用Input输入框组件,有哪些方式_移动开发平台 mPaaS-阿里云帮助中心

本文介绍了使用 Input 输入框组件的不同方式以及相关 API。

在 Kylin 工程中使用该组件。
在其他工程中使用，通过 ESModule 的方式导入组件。
API 说明提供了 props、slots、events 的接口信息。

重要

使用时，一般需要搭配 List[type='form'] 一起使用。

Kylin

<dependency component="{ ListItemInput }" src="@alipay/antui-vue" ></dependency>

ESModule

import { ListItemInput } from '@alipay/antui-vue';

API 说明

props

属性	说明	类型	默认值
value	输入框的值，支持 v-model 绑定。	string	-
label	输入框左侧的标签，为空不显示。	string	-
labelWidth	输入框左侧的标签的 width 样式，支持输入数字（按照 em 处理），字符串。	string，number	auto
placeholder	输入框 placeholder。	string	-
inputType	输入框 type，用于浏览器识别键盘类型。	string	text
clear	输入框清除按钮，当且仅当输入框值不为空且 clear 为 true 且未 disabled 时，显示按钮。	boolean	false
labelId	输入框左侧标签 ID，用于无障碍。	string	-
inputId	输入框标签 ID，用于无障碍。	string	-
disabled	是否禁用输入框。	boolean	false
error	表明当前 input 框输入值为不合理。	boolean	false
button	为空时不显示，右侧按钮文本。	string	-
buttonDisabled	右侧按钮是否禁用。	boolean	false

slots：可将 props.label 从字符串扩展为 DOM 节点。

events

属性	说明	函数	备注
input	当 value 变化时触发 input 组件事件；当清除 value 时也触发, 支持 v-model。	Function(value: boolean): void	-
click	当单击时触发。	Function(event: event): void	-
errorClick	当配置 error 选项时，单击右侧红色圆圈触发。	Function(void): void	-
buttonClick	当配置 button 选项且右侧 button 未禁用时，单击右侧 button 触发。	Function(void): void	Since `0.4.8-open02`

Demo

常规

截图

代码

<template>

  <div>

    <List type="form">
      <ListCell type="header" slot="header">常规类</ListCell>
      <ListItemInput label="标签" placeholder="内容" clear></ListItemInput>
    </List>

    <List type="form">
      <ListItemInput label="标签"placeholder="内容" v-model="syncText" clear></ListItemInput>
      <ListItemInput label="标签"placeholder="内容" v-model="syncText" clear></ListItemInput>
    </List>

    <List type="form">
      <ListItemInput label="标签" placeholder="内容" value="初始值不更新" ></ListItemInput>
    </List>

  </div>

</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        syncText: '同步内容修改',
      };
    },
  };
</script>

<template>

  <div>

    <List type="form">
      <ListCell type="header" slot="header">常见表单</ListCell>
      <ListItemInput label="" placeholder="无标签, 暗提示" clear></ListItemInput>
      <ListItemInput label="优惠券名称" placeholder="请输入名称" clear></ListItemInput>
    </List>

    <List type="form">
      <ListCell type="header" slot="header">固定5个字</ListCell>
      <ListItemInput label="优惠券" label-width="5em" placeholder="暗提示" clear></ListItemInput>
      <ListItemInput label="优惠券代码" label-width="5em" placeholder="暗提示" clear></ListItemInput>
    </List>

    <List type="form">
      <ListCell type="header" slot="header">固定6个字</ListCell>
      <ListItemInput label="优惠券" :label-width="6" placeholder="暗提示" clear></ListItemInput>
      <ListItemInput label="优惠券有效期" :label-width="6" value="永久可用" ></ListItemInput>
    </List>

  </div>

</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        syncText: '同步内容修改',
      };
    },
  };
</script>

表单错误

截图

代码

<template>

  <div>

    <List type="form">
      <ListCell type="header" slot="header">表单中某列数据输入错误的情况</ListCell>
      <ListItemInput label="身份证号" value="33010220170101001XX" error @error-click="onClick"></ListItemInput>
      <ListCell type="footer" slot="footer">注意：表单出错时，首次自动出toast提示错误信息，2s后toast消失；单击右边icon再次toast提示。</ListCell>
    </List>

  </div>

</template>

<script>
  import Toast from '../../../lib/toast';

  export default {
    methods: {
      onClick() {
        Toast.show('填写出错');
      },
    },
  };
</script>