Input

Introduction

The input component is used for users to enter text content. mengyue-components has encapsulated this component and conducted vitest testing. You can use <MYInput></MYInput> to implement an input field.

Basic Usage

Use modelValue to bind the value of the input field.

Code Demo

<template>
  <MYInput v-model='inputValue' placeholder='Please enter content' @update:modelValue='forceUpdate' />
</template>

展开代码

Input Type

The type prop can be used to set the input field type, such as text, password, etc.

Code Demo

<template>
  <MYInput type='password' placeholder='Please enter password' @update:modelValue='forceUpdate' />
</template>

展开代码

Size Control

Use the width and height props to customize the dimensions of the input field.

Code Demo

<template>
  <MYInput width='200px' height='40px' placeholder='Custom size' @update:modelValue='forceUpdate' />
</template>

展开代码

State Control

disabled

Disable the input field:

Code Demo

<template>
  <MYInput disabled placeholder='Disabled state' />
</template>

展开代码

clearable

Display a clear button:

Code Demo

<template>
  <div>
    <MYInput 
      v-model='clearableValue'
      clearable 
      placeholder='Clearable content' 
    />
  </div>
</template>
<script setup>
    import { ref } from 'vue'
    const clearableValue = ref('')
</script>

展开代码

showPassword

Toggle password visibility:

Code Demo

<template>
  <MYInput 
    v-model='passwordValue' 
    type='password' 
    showPassword 
    placeholder='Toggle password visibility' 
    @update:modelValue='forceUpdate'
  />
</template>

展开代码

Input Restrictions

Length Limit

Use minlength and maxlength to limit input length:

Code Demo

<template>
  <MYInput 
    v-model='limitValue' 
    maxlength='10' 
    placeholder='Max 10 characters' 
    @update:modelValue='forceUpdate'
  />
</template>

展开代码

Word Limit

Use wordLimit to display character count:

Code Demo

<template>
  <div>
    <MYInput 
      v-model='wordLimitValue' 
      maxlength='20' 
      wordLimit 
      placeholder='Show character count' 
    />
  </div>
</template>

展开代码

Custom Colors

textColor

Custom text color:

Code Demo

<template>
  <MYInput 
    v-model='textColorValue' 
    textColor='#ff0000' 
    placeholder='Red text' 
    @update:modelValue='forceUpdate'
  />
</template>

展开代码

placeholderColor

Custom placeholder color:

Code Demo

<template>
  <MYInput 
    v-model='placeholderColorValue' 
    placeholderColor='#409EFF' 
    placeholder='Blue placeholder' 
    @update:modelValue='forceUpdate'
  />
</template>

展开代码

Multi-line Text

Use tag="textarea" to implement multi-line text input:

Code Demo

<!---->

<template>
  <MYInput 
    v-model='textareaValue' 
    tag='textarea' 
    width='300px' 
    height='100px' 
    placeholder='Multi-line text input' 
    @update:modelValue='forceUpdate'
  />
</template>

展开代码

Combined Usage

Combine multiple props:

Code Demo

<template>
  <MYInput 
    v-model='combinedValue'
    type='password'
    showPassword
    clearable
    maxlength='15'
    wordLimit
    width='250px'
    textColor='#2c2'
    placeholder='Combined usage example'
    @update:modelValue='forceUpdate'
  />
</template>

展开代码

API Reference

Props

Parameter	Description	Type	Options	Default
type	Input field type	string	text/password etc.	text
tag	Tag type	string	input/textarea etc.	input
width	Width	string | number	—	100%
height	Height	string | number	—	30px
disabled	Whether disabled	boolean	—	false
clearable	Whether clearable	boolean	—	false
showPassword	Whether to show password toggle	boolean	—	false
placeholder	Placeholder text	string	—	''
modelValue	Bound value	string	—	''
minlength	Minimum input length	number	—	—
maxlength	Maximum input length	number | string	—	—
wordLimit	Whether to show character count	boolean	—	false
textColor	Text color	string	Supports hex colors or color names	—
placeholderColor	Placeholder color	string	Supports hex colors or color names	—

Type Definitions

interface InputProps {
  type?: string;
  tag?: string;
  width?: string | number;
  height?: string | number;
  disabled?: boolean;
  clearable?: boolean;
  showPassword?: boolean;
  placeholder?: string;
  modelValue?: string;
  minlength?: number;
  maxlength?: number | string;
  wordLimit?: boolean;
  textColor?: string;
  placeholderColor?: string;
}