All Products
Search
Document Center

Mobile Platform as a Service:Input

Last Updated:Jan 31, 2023

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

<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 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

Tag

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

coupon

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

ID

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>