# Vue Scroll Picker
iOS Style Scroll Picker Component for Vue 2. Support All Gestures of Mouse(also MouseWheel) and Touch.
If you are using vue 3, please refer to the [main](https://github.com/wan2land/vue-scroll-picker/tree/main).
[See Example](http://vue-scroll-picker.dist.be) ([sources](./example))
## Installation
```
npm i vue-scroll-picker@vue2
```
## Usage
### CSS
Import css file (only version `v0.2` or later).
```js
import "vue-scroll-picker/dist/style.css"
```
### ES6
```js
import Vue from "vue"
import VueScrollPicker from "vue-scroll-picker"
Vue.use(VueScrollPicker)
```
or
```js
import Vue from "vue"
import { ScrollPicker, ScrollPickerGroup } from "vue-scroll-picker"
new Vue({
components: {
ScrollPicker,
ScrollPickerGroup,
}
})
```
### Globals
```html
...
```
## Options
### Props
| Name | Type | Default | Example |
| ----------------- |:--------- | -------- | -------- |
| modelValue | `any` | `null` | |
| placeholder | `string` | `null` | |
| empty | `string` | `'No Items'` | |
| options | `string[]`
`{ name: string, value: any }[]` | `[]` | `["10KG", "20KG", "30KG"]`
`[{value: 10, name: "10KG"}, {value: 20, name: "20KG"}]` |
| dragSensitivity | `number` | `1.7` | |
| touchSensitivity | `number` | `1.7` | |
| scrollSensitivity | `number` | `1` | |
### Event
- `@input` : you can use `v-model` :-)
### Styling
- [rscss](http://rscss.io/index.html)
- [Vue Loader Deep Selector](https://vue-loader.vuejs.org/en/features/scoped-css.html) : if you want to override css style, use deep selector in vue-loader!