https://github.com/xiaoluoboding/vue-number-spinner

Number spinner component for Vue.js.
https://github.com/xiaoluoboding/vue-number-spinner

Last synced: 10 months ago
JSON representation

Number spinner component for Vue.js.

• Host: GitHub
• URL: https://github.com/xiaoluoboding/vue-number-spinner
• Owner: xiaoluoboding
• License: mit
• Created: 2016-06-28T05:43:35.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-07-04T09:22:04.000Z (over 9 years ago)
• Last Synced: 2025-04-14T14:23:02.073Z (10 months ago)
• Language: JavaScript
• Homepage: https://xiaoluoboding.github.io/vue-number-spinner
• Size: 27.3 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# vue-number-spinner

[![npm](https://img.shields.io/npm/v/vue-number-spinner.svg?maxAge=2592000&style=flat-square)](https://www.npmjs.com/package/vue-number-spinner)

![Download](https://img.shields.io/npm/dt/vue-number-spinner.svg?style=flat-square)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/xiaoluoboding/vue-number-spinner/master/LICENSE)

[![GitHub stars](https://img.shields.io/github/stars/xiaoluoboding/vue-number-spinner.svg?style=flat-square)](https://github.com/xiaoluoboding/vue-number-spinner/stargazers)

Number spinner component for Vue.js. The number stepper widget, It allows users to type a value directly, or modify an existing value by spinning with the keyboard, mousewheel.

[![NPM](https://nodei.co/npm/vue-number-spinner.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-number-spinner/)

# Installation

```bash

npm i vue-number-spinner -S

```

# Import

**ES6**

```javascript

import vueNumberSpinner from 'vue-number-spinner'

```

**CommonJS**

```javascript

var vueNumberSpinner = require('vue-number-spinner');

```

**script**

```javascript

    var vueNumberSpinner = window['vue-number-spinner'];

```

# Basic Usage

**script**

```javascript

new Vue({

  el: 'body',

  components: { vueNumberSpinner }

});

```

**html**

```html

```

# Props

| Name  | Type | Desc  | Example  |

| :-------- | :--------:|:--------:|:--------:|

| min | Number  | The min value | 0 |

| max | Number  | The max value | 100 |

| step  | Number  | Increment/Decrement the value by step number | 5 |

# keyboard/mousewheel interaction

* `Up` Increment the value by one step.

* `Down` Decrement the value by one step.

# License

MIT