JayeshLab / Vue Numeric Input
Licence: mit
Number input component with controls
Stars: ✭ 63
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Numeric Input
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (+1022.22%)
Mutual labels: input, vue-component
Awesomevalidation
Android validation library which helps developer boil down the tedious work to three easy steps.
Stars: ✭ 1,093 (+1634.92%)
Mutual labels: input
Inputsystem
An efficient and versatile input system for Unity.
Stars: ✭ 1,013 (+1507.94%)
Mutual labels: input
Kokk
Create a beautiful doc from a markdown file. You can insert a vue component into the doc as well.
Stars: ✭ 54 (-14.29%)
Mutual labels: vue-component
Material Ui Password Field
A password field using Material-UI.
Stars: ✭ 54 (-14.29%)
Mutual labels: input
Primevue
The Most Complete Vue UI Component Library
Stars: ✭ 1,085 (+1622.22%)
Mutual labels: vue-component
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: ✭ 1,071 (+1600%)
Mutual labels: vue-component
Insert Text At Cursor
Fast crossbrowser insertion of text at cursor position in a textarea / input
Stars: ✭ 49 (-22.22%)
Mutual labels: input
Bentools Etl
PHP ETL (Extract / Transform / Load) library with SOLID principles + almost no dependency.
Stars: ✭ 45 (-28.57%)
Mutual labels: input
Svelte Input Mask
Input masking component for Svelte with simple API and rich customization
Stars: ✭ 56 (-11.11%)
Mutual labels: input
Vue Meeting Selector
This component is inspired from the meeting selector from doctolib with the power of Vuejs components.
Stars: ✭ 44 (-30.16%)
Mutual labels: vue-component
Navscroll Js
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.
Stars: ✭ 41 (-34.92%)
Mutual labels: vue-component
Serialized Editor
A Vue.js component for editing data that has been serialized in PHP
Stars: ✭ 54 (-14.29%)
Mutual labels: vue-component
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-3.17%)
Mutual labels: input
Vue Numeric Input
Number input component based on Vue that is a replacement of native input number with optional control.
Installation
Install via NPM
$ npm install vue-numeric-input --save
Install via CDN
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-numeric-input"></script>
Global
Register VueNumericInput globally:
import Vue from 'Vue';
import VueNumericInput from 'vue-numeric-input';
Vue.use(VueNumericInput)
Local
Include the VueNumericInput directly into your component using import:
import VueNumericInput from 'vue-numeric-input'
export default {
components: {
VueNumericInput
}
}
Usage
Basic usage
<template>
<div>
<vue-numeric-input v-model="value" :min="1" :max="10" :step="2"></vue-numeric-input>
</div>
</template>
<script>
export default {
data() {
return {
value: 1,
};
},
};
</script>
PROPS:
| Name | Description | Type | Default | Options |
|---|---|---|---|---|
| name | Component name | String | - | - |
| value | Binding value | Number | - | - |
| placeholder | Input placeholder | String | - | - |
| min | Minimum allowed value | Number | -Infinity | - |
| max | Maximum allowed value | Number | Infinity | - |
| step | Incremental Step | Number | 1 | - |
| align | Alignment of Numeric Value | String | left | left, center, right |
| size | Component Size | String | Inherit | size in px, em, rem etc e.g. '20px' |
| precision | Number of decimals | Number | 0 | Integer value |
| controls | Enable/Disable Controls | Boolean | true | true/false |
| controlsType | Controls Type | String | plusminus | plusminus/updown |
| autofocus | Autofocus on Page Load | Boolean | false | true/false |
| readonly | Is Readonly | Boolean | false | true/false |
| disabled | Is Disabled | Boolean | false | true/false |
EVENTS:
| Event Name | Description | Parameters |
|---|---|---|
| input | triggers when input | (newValue) |
| change | triggers when the value changes | (newValue) |
| blur | triggers when Input blurs | (event: Event) |
| focus | triggers when Input focus | (event: Event) |
METHODS:
| Method | Description | Parameters |
|---|---|---|
| focus | focus the Input component | - |
| blur | blur the Input component | - |
Inspired by react-numeric-input
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].