Input

Basic form input component that supports prefix, suffix icons, and other features.

Basic Usage

在 github 中打开

展开代码

复制代码

<template>
  <ol-input class="w-64 h-10" placeholder="Default Placeholder" />
</template>

Icon

Set the prefix and suffix icons of the input box through the prefix and suffix properties.

在 github 中打开

展开代码

复制代码

<template>
  <div class="space-x-2">
    <ol-input class="w-64 h-10" suffix="i-mi-eye" placeholder="Default Placeholder" />
    <ol-input class="w-64 h-10" prefix="i-mi-search" placeholder="Search" />
  </div>
</template>

Password

Create a password input box by setting type="password".

在 github 中打开

展开代码

复制代码

<template>
  <ol-input class="w-64 h-10" type="password" placeholder="Enter your password" />
</template>

Disabled State

Set the input box to a disabled state by setting the disabled attribute.

在 github 中打开

展开代码

复制代码

<template>
  <ol-input class="w-64 h-10" disabled placeholder="Disabled Input" />
</template>

Formatted Input

Format the input content by setting the mask attribute. For example, it can be used to format phone numbers, dates, etc. (Setting the mask attribute requires setting type='text').

在 github 中打开

展开代码

复制代码

<template>
  <ol-input class="w-64 h-10" mask="+86 000 0000 0000" placeholder="+86 123 1231 1231" />
</template>

Regular Expressions

You can limit the format of the input content using regular expressions. For example, the following example limits the input to only numbers starting with 1-6 and up to 6 digits.

在 github 中打开

展开代码

复制代码

<template>
  <ol-input class="w-64 h-10" :mask="/^[1-6]\d{0,5}$/" placeholder="Enter a 6-digit number" />
</template>

Attributes

Attribute Name	Description	Type	Default Value
type	Input box type	'text' | 'password'	'text'
placeholder	Input box placeholder text	string	-
disabled	Whether to disable	boolean	false
prefix	Prefix icon	string	-
suffix	Suffix icon	string	-
mask	Input formatting rule	string	-
modelValue	Bound value	string | number	-