input

Input Component Based On Vue.js

Installation

npm i @jsheber/input -S

yarn add @jsheber/input

API

| Param | Description | Type | Default | | --------- | ----------------- | -------- | ------- | | v-model | Value input | String | - | | placeholder | Name input | String | - | | required | Leave the mandatory field | Boolean | false | | disabled | disables the field | Boolean | - | | icon | set icon left | String | - | | icon-left | set icon left | String | - | | icon-rigth | set icon rigth | String | - | | border | set border radius | String | '33px' | | maxlength | maximum to fill in the field | Number | - | | show-word-limit | count word show limit | Boolean | false | | clearable | clearable field | Boolean | false | | show-password | Show password | Boolean | false |

Usage

Basic usage

# example
<template>
  <div id="app">
    <h2>Basic usage</h2>
    <h-input v-model="valor" />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

Icon Left

# example
<template>
  <div id="app">
    <h2>Icon Left</h2>
    <h-input icon="el-icon-search" v-model="valor" />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

Icon Rigth

# example
<template>
  <div id="app">
    <h2>Icon Rigth</h2>
    <h-input icon-rigth="el-icon-search" v-model="valor" />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

Icon Left Rigth

# example
<template>
  <div id="app">
    <h2>Icon Left Rigth</h2>
    <h-input
      icon-left="el-icon-search"
      icon-rigth="el-icon-search"
      v-model="valor"
    />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

Border All

# example
<template>
  <div id="app">
    <h2>Border All</h2>
    <h-input
      v-model="valor"
      border="10px"
    />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

Border Left

# example
<template>
  <div id="app">
    <h2>Border Left</h2>
    <h-input
      icon-left="el-icon-search"
      v-model="valor"
      border="30px 0 0 30px"
    />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

Placeholder

# example
<template>
  <div id="app">
    <h2>Placeholder</h2>
    <h-input
      v-model="valor"
      placeholder="My placeholder"
    />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

Maxlength

# example
<template>
  <div id="app">
    <h2>Maxlength</h2>
    <h-input
      v-model="valor"
      maxlength="10"
    />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

Show word limit

# example
<template>
  <div id="app">
    <h2>Show word limit</h2>
    <h-input
      v-model="valor"
      maxlength="10"
      show-word-limit
    />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

Disabled

# example
<template>
  <div id="app">
    <h2>Disabled</h2>
    <h-input
      v-model="valor"
      disabled
    />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

Clearable

# example
<template>
  <div id="app">
    <h2>Clearable</h2>
    <h-input
      v-model="valor"
      clearable
    />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

Password

# example
<template>
  <div id="app">
    <h2>Password</h2>
    <h-input
      v-model="valor"
      placeholder="Digite sua senha"
      show-password
    />
  </div>
</template>

<script>
import HInput from '@jsheber/input'

export default {
  name: 'app',
  components: {
    HInput
  },
  data: () => ({
    valor: ''
  })
}
</script>

License

MIT