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.
<select> element behavior for consistency.npm install vue-scroll-picker
Vue Scroll Picker can be used both globally and locally in your Vue application. Below are examples of how to set it up.
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
To use Vue Scroll Picker in a specific component, import it and register it locally:
<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>
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)
}
})
Vue Scroll Picker accepts several props to customize its behavior:
Prop Type Default DescriptionmodelValue 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.
Vue Scroll Picker emits several events to notify changes:
Event Payload Descriptionupdate: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.
Vue Scroll Picker provides slots for custom rendering:
Slot Props Descriptiondefault { option: { name: string; value: any; disabled?: boolean } } Custom rendering for each option. empty { text: string } Custom rendering when no options are available.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4