License

This project is licensed under the MIT License.

Probs

• 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

Installation

npm i vue-dynamic-input-component

or

yarn add vue-dynamic-input-component

Usage

import {VInput} from 'vue-dynamic-input-component' <br>
import 'vue-dynamic-input-component/dist/style.css';

Props

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

Example

<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

License

This project is licensed under the MIT License.