Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smwbtech/vue-number-input
Vue component for numbers input
https://github.com/smwbtech/vue-number-input
vue vue-component vue-input vue-number vue-number-input vuejs
Last synced: about 1 month ago
JSON representation
Vue component for numbers input
- Host: GitHub
- URL: https://github.com/smwbtech/vue-number-input
- Owner: smwbtech
- License: mit
- Created: 2019-08-23T12:08:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-02-22T14:13:38.000Z (almost 5 years ago)
- Last Synced: 2024-09-21T12:38:23.275Z (3 months ago)
- Topics: vue, vue-component, vue-input, vue-number, vue-number-input, vuejs
- Language: JavaScript
- Homepage: https://smwbtech.github.io/vue-number-input/
- Size: 1.72 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-a11y-vue - vue-number-input - Vue component for numbers input. (Components and plugins / Courses)
- awesome-access - vue-number-input - Vue component for numbers input. (Components and plugins / Courses)
README
# @smartweb/vue-number-input
[](https://vuejs.org/index.html)
[](https://github.com/smwbtech/vue-flash-message/blob/master/LICENSE.md)
[](https://travis-ci.org/smwbtech/vue-number-input)
[](https://coveralls.io/github/smwbtech/vue-number-input?branch=master)
[](https://bundlephobia.com/result?p=@smartweb/vue-number-input@latest)
Vue component for numbers input.
- Accessible: uses ARIA agreements (100% accessibility in lighthouse)
- Use your keyboard to navigate and control
- Use your mousewheel or touchpad to increase or descrease value
- Flexible styling
- Support custom controls through slots
#### [Live Demo](https://smwbtech.github.io/vue-number-input/)
## Download
Use npm
```
npm i @smartweb/vue-number-input
```
Or via cdn
```html
```
## Configuration
Import and register in your component.vue file
```javascript
import VueNumberInput from '@smartweb/vue-number-input';
export default {
components: {
VueNumberInput
}
};
```
Use it in your template with v-model directive
```html
```
Or register it globally in your application entry point (main.js or as you called it)
```javascript
import Vue from 'vue';
import VueNumberInput from '@smartweb/vue-number-input';
// Global registration of the component
Vue.component('vue-number-input', VueNumberInput);
new Vue({
render: h => h(App)
}).$mount('#app');
```
## Usage
You can bind following props for vue-input-number element
| Prop | Type | Default value | Description |
| -------------------- | :---------: | :---------------------: | :--------------------------------------------------------------------------------------------------------------: |
| **value** | **Number** | 0 | Defines a value for 'value' and 'aria-valuenow' attributes of element. |
| **min** | **Number** | Number.MIN_SAFE_INTEGER | Minimum value of the number range. Provides a value for 'aria-valuemin' attributes of element. |
| **max** | **Number** | Number.MAX_SAFE_INTEGER | Maximum value of the number range. Provides a value for 'aria-valuemax' attributes of element. |
| **step** | **Number** | 1 | Incremental step |
| **disabled** | **Boolean** | false | Defines a value for 'aria-disabled' and 'disabled' attributes of element. Also disable controls buttons |
| **readonly** | **Boolean** | false | Defines a value for 'readonly' attribute of element. |
| **autofocus** | **Boolean** | false | Defines a value for 'autofocus' attribute of element. |
| **controlsPosition** | **String** | 'on edge' | Acceptable values: 'on edges', 'left', right'. Defines position of control buttons. |
| **inputClass** | **String** | - | Defines user's class for input element |
| **buttonIncClass** | **String** | - | Defines user's class for increase button |
| **buttonDecClass** | **String** | - | Defines user's class for decrease button |
#### Example
```html
```
For more examples visit **[demo page](https://smwbtech.github.io/vue-number-input/)**
#### Your own controls through slot
You can create your own controls and pass them to slots
Read more about slots in [official docs](https://vuejs.org/v2/guide/components-slots.html)
```html
```
### Events
| Event | Description | Params |
| :--------: | :------------------------------------------------------: | :--------: |
| **input** | Triggered on user input or buttons clicks | Number |
| **change** | Triggered on value changed and focus leave input element | Number |
| **focus** | Triggered when user focused on input field | FocusEvent |
| **blur** | Triggered when focus leave input field | FocusEvent |
## LICENSE
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.