All Products
Search
Document Center

Input

Last Updated: May 27, 2021

This topic describes different methods of using the Input component and the API descriptions:

  • Use this component in the Kylin project.
  • Use this component in other projects. Import it through ESModule.
  • API description provides API information for props, slots, and events.
Note: This component is generally used with List [type = 'form']

Kylin

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

ESModule

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

API description

props

Property Description Type Default value
value The value of an input box, which can be bound to v-model. String -
label The label on the left side of an input box, which is not displayed when the value is empty. String -
labelWidth The width of the label on the left side of an input box, which can be set to a number (similar to em) or string (in a custom unit). String, Number auto
placeholder The placeholder text of an input box. String -
inputType The type of the input box. Used for the browser to identify the keyboard type. String text
clear The clear button of an input box. Displayed only when the input box is not empty and clear is set to true instead of disabled. Boolean false
labelId The id of the label on the left side of an input box. Used for accessibility, String -
inputId The id of the label of an input box. Used for accessibility. String -
disabled Whether to disable an input box. Boolean false
error Indicate that the current input value of an input box is improper. Boolean false
button The button text on the right side, which is not displayed when the value is empty. String -
buttonDisabled Whether to disable the button on the right side. Boolean false

slots

Name Description Scope
- Enable you to extend props.label from a string to a DOM node. -

events

Name Description Function Note
input Trigger an input event when value changes or value is cleared. Support v-model. Function(value: boolean): void
click Triggered upon a tap operation. Function(event: event): void
errorClick Triggered when the red circle on the right side is tapped and error is configured. Function(void): void
buttonClick Triggered when the button on the right side is tapped and button is configured and enabled. Function(void): void Since 0.4.8-open02

Demo

General

Sample image

Sample code

 
  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>

Label

Sample image

Sample code

 
  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>

Input error

Sample image

Sample code

 
  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>