Input 输入框

本文介绍了使用 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>
阿里云首页 移动开发平台 mPaaS 相关技术圈