Vue Scroll Picker

Vue Scroll Picker is an iOS-style scroll picker component for Vue 3. It supports all gestures, including mouse and touch interactions, ensuring a smooth and intuitive user experience.

If you are using Vue 2, please refer to the v0.x branch.

Live Demo (source)

Features

- TypeScript Support: Uses generics for strict type checking and improved developer experience.
- Native-like Behavior: Mimics element behavior for consistency.
- Lightweight & Performant: Minimal dependencies with optimized rendering.

Installation

``bash
npm install vue-scroll-picker
`

Usage

Vue Scroll Picker can be used both globally and locally in your Vue application. Below are examples of how to set it up.

$3

To register Vue Scroll Picker globally in your Vue application, import it in your main file and apply it as a plugin:

Vue3 Global Registration Guide

`js
import { createApp } from "vue";

import VueScrollPicker from "vue-scroll-picker";
import "vue-scroll-picker/style.css";

const app = createApp(); / /

app.use(VueScrollPicker); // export default is plugin
`

$3

To use Vue Scroll Picker in a specific component, import it and register it locally:

Vue3 Local Registration Guide

`vue


`

$3

`ts
import VueScrollPicker from "vue-scroll-picker" // export default is plugin
import 'vue-scroll-picker/style.css'

export default defineNuxtPlugin({
async setup({ vueApp }) {
vueApp.use(VueScrollPicker)
}
})
`

Options

$3

Vue Scroll Picker accepts several props to customize its behavior:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| modelValue | string \| number \| boolean \| null | undefined | The selected value of the picker. |
| options | Array<{ name: string; value: any; disabled?: boolean }> | [] | The list of options displayed in the picker. |
| emptyText | string | 'No options available' | Text displayed when there are no options available. |
| dragSensitivity | number | 1.7 | Sensitivity of dragging interaction. |
| touchSensitivity | number | 1.7 | Sensitivity of touch interaction. |
| wheelSensitivity | number | 1 | Sensitivity of mouse wheel scrolling. |

$3

Vue Scroll Picker emits several events to notify changes:

| Event | Payload | Description |
|-------|---------|-------------|
| update:modelValue | string \| number \| boolean \| null | Fired when the selected value changes. |
| start | void | Fired when interaction starts. |
| move | string \| number \| boolean \| null | Fired when the selection moves. |
| end | string \| number \| boolean \| null | Fired when interaction ends. |
| cancel | void | Fired when interaction is canceled. |
| wheel | string \| number \| boolean \| null | Fired when using the mouse wheel. |
| click | string \| number \| boolean \| null | Fired when the picker is clicked. |

$3

Vue Scroll Picker provides slots for custom rendering:

| Slot | Props | Description |
|------|-------|-------------|
| default | { option: { name: string; value: any; disabled?: boolean } } | Custom rendering for each option. |
| empty | { text: string }` | Custom rendering when no options are available. |

Show more