A Vue component library for building interactive UI elements.
This project is licensed under the MIT License.
- modelValue (required): The v-model binding for the input value.
- type: The type of the input field (e.g., "text", "number", "password").
- placeholder: The placeholder text for the input field.
- background-color: The background color of the input field.
- border-radius: The border radius of the input field.
- color: The text color of the input field.
- border-color: The border color of the input field.
- min-length: The minimum length of the input value.
- max-length: The maximum length of the input value.
- pattern: A regular expression pattern for input validation.
- width: Width of design input.
- height: Height of design input
- min-width: Min width of design input
- max-width: Max width of design input
- min-height: Min height of design input
- max-height: Max height of design input
npm i vue-dynamic-input-component or yarn add vue-dynamic-input-component import {VInput} from 'vue-dynamic-input-component' <br> import 'vue-dynamic-input-component/dist/style.css'; The following table describes the props that can be passed to the component for customization:
| Prop | Type | Description |
|---|---|---|
modelValue | String/Number | The v-model binding for the input value. |
typeValue | String | The type of the input field. Possible values: "string", "number", "password". |
placeValue | String | The placeholder text for the input field. |
backgroundColor | String | The background color of the input field. |
borderRadius | String | The border radius of the input field. |
color | String | The text color of the input field. |
borderColor | String | The border color of the input field. |
focusBorderColor | String | The border color of the input field when it is focused. |
focusBackgroundColor | String | The background color of the input field when it is focused. |
minLength | String | The minimum length of the input value. |
maxLength | String | The maximum length of the input value. |
pattern | String | A regular expression pattern for input validation. |
minWidth | String | The minimum width of the input field. |
maxWidth | String | The maximum width of the input field. |
width | String | The width of the input field. |
height | String | The height of the input field. |
minHeight | String | The minimum height of the input field. |
maxHeight | String | The maximum height of the input field. |
<template> <VInput v-model="inputValue" typeValue="text" placeValue="Enter your name" backgroundColor="#f2f2f2" borderRadius="5px" color="#333" borderColor="#ccc" focusBorderColor="red" focusBackgroundColor="#fff" minLength="2" maxLength="20" pattern="[a-zA-Z]+" minWidth="200px" maxWidth="500px" width="100%" height="40px" minHeight="40px" maxHeight="60px" ></VInput> </template> <script> import { VInput } from 'vue-dynamic-input-component'; ## Props This project is licensed under the MIT License.