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.
This component is generally used with List [type = 'form']
.
Kylin
<dependency component="{ ListItemInput }" src="@alipay/antui-vue" ></dependency>
ESModule
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 | String | - |
label | The label on the left side of an input box, which is not displayed when the value is empty. | String | - |
labelWidth | The | 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 | Boolean | false |
labelId | The | String | - |
inputId | The | 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 | - |
events
Name | Description | Function | Note |
---|---|---|---|
input | Trigger an | 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 | Function(void): void | |
buttonClick | Triggered when the button on the right side is tapped and | Function(void): void | Since |
Demo
General
Sample image
Sample code
<template>
<div>
<List type="form">
<ListCell type="header" slot="header">Regular Item</ListCell>
<ListItemInput label="Tag" placeholder="Content" clear></ListItemInput>
</List>
<List type="form">
<ListItemInput label="Tag"placeholder="Content" v-model="syncText" clear></ListItemInput>
<ListItemInput label="Tag"placeholder="Content" v-model="syncText" clear></ListItemInput>
</List>
<List type="form">
<ListItemInput label="Tag" placeholder="Content" value="Do not synchronize initial value" ></ListItemInput>
</List>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
syncText: 'Synchronize revised content',
};
},
};
</script>
Label
Sample image
Sample code
<template>
<div>
<List type="form">
<ListCell type="header" slot="header">Regular List</ListCell>
<ListItemInput label="" placeholder="No tag,dark prompt text" clear></ListItemInput>
<ListItemInput label="Coupon name" placeholder="Enter the coupon name" clear></ListItemInput>
</List>
<List type="form">
<ListCell type="header" slot="header">Only 5 characters are allowed</ListCell>
<ListItemInput label="Coupon" label-width="5em" placeholder="dark prompt dark prompt" clear></ListItemInput>
<ListItemInput label="Coupon Code" label-width="5em" placeholder="dark prompt dark prompt" clear></ListItemInput>
</List>
<List type="form">
<ListCell type="header" slot="header">Only 6 characters are allowed</ListCell>
<ListItemInput label="Coupon" :label-width="6" placeholder="dark prompt dark prompt" clear></ListItemInput>
<ListItemInput label="Coupon Validity Period" :label-width="6" value="Permanent validity" ></ListItemInput>
</List>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
syncText: 'Synchronize modified content',
};
},
};
</script>
Input error
Sample image
Sample code
<template>
<div>
<List type="form">
<ListCell type="header" slot="header">In case of any incorrect data</ListCell>
<ListItemInput label="ID Number" value="33010220170101001XX" error @error-click="onClick"></ListItemInput>
<ListCell type="footer" slot="footer">Note: an incorrect data will invoke a toast prompt. The toast will disappear after 2 seconds. Tap the red icon to show the toast prompt again.</ListCell>
</List>
</div>
</template>
<script>
import Toast from '../../../lib/toast';
export default {
methods: {
onClick() {
Toast.show('fill in error');
},
},
};
</script>