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 <select> element behavior for consistency.
• Lightweight & Performant: Minimal dependencies with optimized rendering.

Installation

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.

Global Registration

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

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

Local Registration

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

Vue3 Local Registration Guide

<script setup>
import { VueScrollPicker } from 'vue-scroll-picker'
import "vue-scroll-picker/style.css";

const options = [
  { name: 'Option 1', value: 1 },
  { name: 'Option 2', value: 2 },
  { name: 'Option 3', value: 3 },
]
const modelValue = ref(1)
</script>
<template>
  <VueScrollPicker :options="options" v-model="modelValue" />
</template>

Nuxt

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

Props

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.

Events

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.

Slots

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.