
Security News
New CVE Forecasting Tool Predicts 47,000 Disclosures in 2025
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
vue-scroll-picker
Advanced tools
iOS Style Scroll Picker Component for Vue 3. Support All Gestures of Mouse(also MouseWheel) and Touch.
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 | 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. |
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. |
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. |
FAQs
iOS Style Scroll Picker Component for Vue 3. Support All Gestures of Mouse(also MouseWheel) and Touch.
The npm package vue-scroll-picker receives a total of 4,823 weekly downloads. As such, vue-scroll-picker popularity was classified as popular.
We found that vue-scroll-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.