全部产品

Input 输入框

更新时间:2020-08-07 20:28:58

Input 输入框文档介绍了使用该组件的不同方式以及 API 文档:

  • Kylin 工程中使用该组件。
  • 在其他工程中使用,通过 ESModule 的方式导入组件。

API 文档 提供了 props、slots、events 的接口信息。

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

Kylin

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

ESModule

  1. 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 输入框清除按钮,当且仅当输入框值不为空且cleartrue且未disabled时显示按钮 boolean false
labelId 输入框左侧标签id,用于无障碍 string -
inputId 输入框标签id,用于无障碍 string -
disabled 是否禁用输入框 boolean false
error 表明当前input框输入值为不合理 boolean false
button 为空时不显示,右侧按钮文本 string -
buttonDisabled 右侧按钮是否禁用 boolean false

slots

name 说明 scope
- 可将props.label从字符串扩展为DOM节点 -

events

name 说明 函数 备注
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

常规

截图

代码

  1. <template>
  2. <div>
  3. <List type="form">
  4. <ListCell type="header" slot="header">常规类</ListCell>
  5. <ListItemInput label="标签" placeholder="内容" clear></ListItemInput>
  6. </List>
  7. <List type="form">
  8. <ListItemInput label="标签"placeholder="内容" v-model="syncText" clear></ListItemInput>
  9. <ListItemInput label="标签"placeholder="内容" v-model="syncText" clear></ListItemInput>
  10. </List>
  11. <List type="form">
  12. <ListItemInput label="标签" placeholder="内容" value="初始值不更新" ></ListItemInput>
  13. </List>
  14. </div>
  15. </template>
  16. <script type="text/javascript">
  17. export default {
  18. data() {
  19. return {
  20. syncText: '同步内容修改',
  21. };
  22. },
  23. };
  24. </script>

标签

截图

代码

  1. <template>
  2. <div>
  3. <List type="form">
  4. <ListCell type="header" slot="header">常见表单</ListCell>
  5. <ListItemInput label="" placeholder="无标签, 暗提示" clear></ListItemInput>
  6. <ListItemInput label="优惠券名称" placeholder="请输入名称" clear></ListItemInput>
  7. </List>
  8. <List type="form">
  9. <ListCell type="header" slot="header">固定5个字</ListCell>
  10. <ListItemInput label="优惠券" label-width="5em" placeholder="暗提示" clear></ListItemInput>
  11. <ListItemInput label="优惠券代码" label-width="5em" placeholder="暗提示" clear></ListItemInput>
  12. </List>
  13. <List type="form">
  14. <ListCell type="header" slot="header">固定6个字</ListCell>
  15. <ListItemInput label="优惠券" :label-width="6" placeholder="暗提示" clear></ListItemInput>
  16. <ListItemInput label="优惠券有效期" :label-width="6" value="永久可用" ></ListItemInput>
  17. </List>
  18. </div>
  19. </template>
  20. <script type="text/javascript">
  21. export default {
  22. data() {
  23. return {
  24. syncText: '同步内容修改',
  25. };
  26. },
  27. };
  28. </script>

表单错误

截图

代码

  1. <template>
  2. <div>
  3. <List type="form">
  4. <ListCell type="header" slot="header">表单中某列数据输入错误的情况</ListCell>
  5. <ListItemInput label="身份证号" value="33010220170101001XX" error @error-click="onClick"></ListItemInput>
  6. <ListCell type="footer" slot="footer">注意:表单出错时,首次自动出toast提示错误信息,2s后toast消失;点击右边icon再次toast提示。</ListCell>
  7. </List>
  8. </div>
  9. </template>
  10. <script>
  11. import Toast from '../../../lib/toast';
  12. export default {
  13. methods: {
  14. onClick() {
  15. Toast.show('填写出错');
  16. },
  17. },
  18. };
  19. </script>