Input

Brief Introduction

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

Basic Usage

Use modelValue to bind the value of the input box.

Code Demo

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

展开代码

Input Type

Use the type property to set the type of the input box, 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 properties to customize the dimensions of the input box.

Code Demo

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

展开代码

State Control

disabled

Disable the input box:

Code Demo

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

展开代码

clearable

Show 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='Maximum 10 characters' 
    @update:modelValue='forceUpdate'
  />
</template>

展开代码

Word Count

Use wordLimit to display word count:

Code Demo

0/20

<template>
  <div>
    <MYInput 
      v-model='wordLimitValue' 
      maxLength='20' 
      wordLimit 
      placeholder='Show word 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>

展开代码

Multiline Text

Use tag="textarea" for multiline text input:

Code Demo

<!---->

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

展开代码

Combined Usage

Combine multiple properties:

Code Demo

0/15

<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 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 word count	boolean	—	false
textColor	Text color	string	Hex or named color	—
placeholderColor	Placeholder color	string	Hex or named color	—

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